@keyframes slideIn {
  0% {
    right: -160px;
  }
  100% {
    right: 0;
  }
}
.player {
  .playlist-countdown {
    display: flex;
    height: 72px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    transition:
      opacity 400ms,
      bottom 300ms;
    cursor: pointer;
    box-shadow:
      0px 0px 0px 1px rgba(0, 0, 0, 0.2),
      0px 8px 60px -16px rgba(0, 0, 0, 0.2);

    &.slideIn {
      right: -160px;
      animation: slideIn 500ms 500ms forwards;
    }

    &.hidden {
      pointer-events: none;
      opacity: 0;
      .playlist-countdown-content-placeholder {
        .playlist-countdown-content-background {
          width: 0;
          .playlist-countdown-content {
            opacity: 0;
          }
        }
      }
    }

    &.canceled {
      bottom: -50px;
      opacity: 0;
    }

    &:hover {
      .playlist-countdown-content-placeholder .playlist-countdown-content-background {
        background-color: #000000;
      }
    }

    .playlist-countdown-poster {
      width: 128px;
      height: inherit;
      border-radius: 4px 0 0 4px;
      background-size: contain;
      background-repeat: round;
    }

    .playlist-countdown-content-placeholder {
      width: 152px;
      height: inherit;

      .playlist-countdown-content-background {
        width: inherit;
        border-radius: 0 4px 3px 0;
        background-color: rgba(0, 0, 0, 0.7);
        height: inherit;
        transition: width 500ms 1000ms;

        .playlist-countdown-content {
          width: inherit;
          transition: opacity 300ms 1200ms;

          .playlist-countdown-text {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #fff;
            float: left;
            line-height: initial;

            .playlist-countdown-text-title {
              margin-bottom: 12px;
              opacity: 0.7;
              .playlist-countdown-time-left {
                display: inline;
                margin-left: 4px;
              }
            }

            .playlist-countdown-text-name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .playlist-countdown-cancel {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            * {
              width: inherit;
              height: inherit;
            }
          }
        }
      }
    }
  }

  &.size-md {
    .playlist-countdown {
      height: 54px;

      .playlist-countdown-poster {
        width: 96px;
      }

      .playlist-countdown-content-placeholder {
        width: 152px;

        .playlist-countdown-content-background {
          .playlist-countdown-content {
            .playlist-countdown-text {
              padding: 8px;

              .playlist-countdown-text-title {
                margin-bottom: 4px;
              }
            }

            .playlist-countdown-cancel {
              top: 3px;
              right: 3px;
            }
          }
        }
      }
    }
  }

  &.size-sm,
  &.size-xs,
  &.size-ty {
    .playlist-countdown {
      z-index: 1;
      height: 36px;
      margin: 8px;

      .playlist-countdown-poster {
        display: none;
      }

      .playlist-countdown-content-placeholder {
        width: 108px;

        .playlist-countdown-content-background {
          transition: width 500ms;
          border-radius: 2px;

          .playlist-countdown-content {
            .playlist-countdown-text {
              width: 90%;
              padding: 3px 0 0 4px;

              .playlist-countdown-text-title {
                font-size: 12px;
                margin-bottom: 0;
              }

              .playlist-countdown-text-name {
                font-size: 12px;
                font-weight: 400;
              }
            }

            .playlist-countdown-cancel {
              top: 0;
              right: 0;
            }
          }
        }
      }
    }
  }
}