@keyframes castOnTVAnimation {
  0% {
    opacity: 0;
    transform: rotateY(70deg);
  }
  33% {
    opacity: 0.3;
    transform: rotateY(50deg);
  }
  66% {
    opacity: 0.6;
    transform: rotateY(30deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0);
  }
}

.player {
  .cast-on-tv-button-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;

    span {
      font-weight: lighter;
      color: white;
    }

    &.show-cast-on-tv {
      animation: castOnTVAnimation 300ms linear forwards;
    }
  }

  .btn.cast-on-tv-button {
    font-size: 15px;
    max-width: 200px;
    transition: max-width 200ms;
    padding: 0 16px;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    transform: translate(-50%, -50%);
    left: 50%;

    span {
      transform: translateX(0px);
      opacity: 1;
      transition:
        transform 100ms,
        opacity 100ms;
      display: inline-block;
    }
  }

  .cast-on-tv-icon-container {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-right: 3px;

    i {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}