/**
 * Deck smart-button
 */

smart-button .icon[data-icon] {
  position: relative;
  color: white;
  display: inline-block;
  line-height: 28rem;
}

smart-button .icon[data-icon]:before {
  font-size: 30rem;
}

smart-button[type="app-button"].deck-tv {
  background-color: #D70270;
}

smart-button[type="app-button"].deck-application {
  background-color: #07CAB0;
}

smart-button[type="app-button"].deck-device {
  background-color: #0074D4;
}

smart-button[type="app-button"].deck-dashboard {
  background-color: #FF7E00;
}

.card smart-button {
  text-align: center;
}

.card smart-button[type="app-button"]::after {
  left: 0;
}

/**
 * Deck wave effect
 */

.deck-wave {
  position: absolute;
  width: 134.4rem;
  height: 67.2rem;
  transform: scale(1.2);
  animation: defaultWaveAnimation 5.0s linear 0s infinite normal;
  animation-play-state: paused;
}

.card.focused .deck-wave {
  animation-play-state: running;
}

#main-section[data-mode="edit"] .deck-wave,
#main-section[data-mode="arrange"] .deck-wave {
  animation-play-state: paused;
}

.wave-front {
  animation-duration: 3.05s
}

.wave-back {
  animation-duration: 3.0s;
}

.tv-wave-front {
  bottom: -16rem;
  animation-name: tvWaveFrontAnimation;
  background-image: url('images/wave_pink_01.png');
}

.tv-wave-back {
  bottom: -14rem;
  animation-name: tvWaveBackAnimation;
  background-image: url('images/wave_pink_02.png');
}

.application-wave-front {
  bottom: -16rem;
  animation-name: applicationWaveFrontAnimation;
  background-image: url('images/wave_green_01.png');
}

.application-wave-back {
  bottom: -14rem;
  animation-name: applicationWaveBackAnimation;
  background-image: url('images/wave_green_02.png');
}

.device-wave-front {
  bottom: -16rem;
  animation-name: deviceWaveFrontAnimation;
  background-image: url('images/wave_blue_01.png');
}

.device-wave-back {
  bottom: -13rem;
  animation-name: deviceWaveBackAnimation;
  background-image: url('images/wave_blue_02.png');
}

.dashboard-wave-front {
  bottom: -16rem;
  animation-name: dashboardWaveFrontAnimation;
  background-image: url('images/wave_orange_01.png');
}

.dashboard-wave-back {
  bottom: -13rem;
  animation-name: dashboardWaveBackAnimation;
  background-image: url('images/wave_orange_02.png');
}

@keyframes defaultWaveAnimation {
  from {transform: translateX(0);}
  to {transform: translateX(-67.2rem);}
}

@keyframes tvWaveFrontAnimation {
  from {transform: translateX(0);}
  to {transform: translateX(-67.2rem);}
}

@keyframes tvWaveBackAnimation {
  from {transform: translateX(-3rem);}
  to {transform: translateX(-70.2rem);}
}

@keyframes applicationWaveFrontAnimation {
  from {transform: translateX(-16rem);}
  to {transform: translateX(-83.2rem);}
}

@keyframes applicationWaveBackAnimation {
  from {transform: translateX(-23rem);}
  to {transform: translateX(-90.2rem);}
}

@keyframes deviceWaveFrontAnimation {
  from {transform: translateX(-22rem);}
  to {transform: translateX(-89.2rem);}
}

@keyframes deviceWaveBackAnimation {
  from {transform: translateX(-25rem);}
  to {transform: translateX(-92.2rem);}
}

@keyframes dashboardWaveFrontAnimation {
  from {transform: translateX(-35rem);}
  to {transform: translateX(-102.2rem);}
}

@keyframes dashboardWaveBackAnimation {
  from {transform: translateX(-32rem);}
  to {transform: translateX(-99.2rem);}
}