@keyframes openSmartContainer {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes closeSmartContainer {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.player:not(.touch) .smart-container {
  background-color: #222222;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  position: absolute;
  right: 0px;
  min-width: 193px;
  font-size: 15px;
  z-index: 10;
  display: block;
  animation: openSmartContainer 100ms ease-out forwards;

  &.leaving {
    animation: closeSmartContainer 100ms ease-out forwards;
  }

  &.top {
    bottom: 100%;
    margin-bottom: 6px;

    // protection for seekbar hover
    &:before {
      display: block;
      content: ' ';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 6px;
    }
  }
  &.bottom {
    top: 100%;
    margin-top: 6px;
  }
  &.right {
    left: 0px;
  }
  &.left {
    right: 0px;
  }

  .smart-container-item {
    margin: 16px;
    color: rgba(244, 244, 244, 0.8);
    white-space: nowrap;
    display: flex;
    justify-content: space-between;

    &.select-menu-item {
      label {
        .label-icon {
          display: none;
        }
      }
      .dropdown,
      select {
        align-self: flex-end;
      }
      .dropdown {
        span:not(.badge-icon) {
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
        }
      }
      select {
        text-align-last: right;
      }
    }
  }
}

.player {
  &.touch,
  &.size-sm,
  &.size-xs {
    .smart-container-item {
      width: 300px;
      max-width: 100%;
      margin: 16px auto;
      color: rgba(244, 244, 244, 0.8);
      white-space: nowrap;
      text-align: left;
      display: flex;
      justify-content: space-between;

      &.select-menu-item {
        label {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          margin-right: 20px;

          .label-icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 16px;
          }
        }
        .dropdown,
        select {
          align-self: flex-end;
        }
        select {
          text-align-last: right;
          min-width: 1px;
          line-height: 24px;
        }
      }
    }
    &.Windows {
      select {
        option {
          color: black;
          background-color: white;
        }
      }
    }
  }
}