plyr/src/sass/components/menus.scss

// --------------------------------------------------------------
// Menus
// --------------------------------------------------------------

.plyr__menu {
  display: flex; // Edge fix
  position: relative;

  // Animate the icon
  .plyr__control svg {
    transition: transform 0.3s ease;
  }
  .plyr__control[aria-expanded='true'] {
    svg {
      transform: rotate(90deg);
    }

    // Hide tooltip
    .plyr__tooltip {
      display: none;
    }
  }

  // The actual menu container
  &__container {
    animation: plyr-popup 0.2s ease;
    background: $plyr-menu-background;
    border-radius: 4px;
    bottom: 100%;
    box-shadow: $plyr-menu-shadow;
    color: $plyr-menu-color;
    font-size: $plyr-font-size-base;
    margin-bottom: 10px;
    position: absolute;
    right: -3px;
    text-align: left;
    white-space: nowrap;
    z-index: 3;

    > div {
      overflow: hidden;
      transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    // Arrow
    &::after {
      border: $plyr-menu-arrow-size solid transparent;
      border-top-color: $plyr-menu-background;
      content: '';
      height: 0;
      position: absolute;
      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
      top: 100%;
      width: 0;
    }

    [role='menu'] {
      padding: $plyr-control-padding;
    }

    [role='menuitem'],
    [role='menuitemradio'] {
      margin-top: 2px;

      &:first-child {
        margin-top: 0;
      }
    }

    // Options
    .plyr__control {
      align-items: center;
      color: $plyr-menu-color;
      display: flex;
      font-size: $plyr-font-size-menu;
      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
      padding-left: calc(#{$plyr-control-padding} * 1.5);
      padding-right: calc(#{$plyr-control-padding} * 1.5);
      padding-top: calc(#{$plyr-control-padding} / 1.5);
      user-select: none;
      width: 100%;

      > span {
        align-items: inherit;
        display: flex;
        width: 100%;
      }

      &::after {
        border: $plyr-menu-item-arrow-size solid transparent;
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      &--forward {
        padding-right: calc(#{$plyr-control-padding} * 4);

        &::after {
          border-left-color: $plyr-menu-item-arrow-color;
          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
        }

        &.plyr__tab-focus::after,
        &:hover::after {
          border-left-color: currentColor;
        }
      }

      &--back {
        font-weight: $plyr-font-weight-regular;
        margin: $plyr-control-padding;
        margin-bottom: calc(#{$plyr-control-padding} / 2);
        padding-left: calc(#{$plyr-control-padding} * 4);
        position: relative;
        width: calc(100% - (#{$plyr-control-padding} * 2));

        &::after {
          border-right-color: $plyr-menu-item-arrow-color;
          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
        }

        &::before {
          background: $plyr-menu-back-border-color;
          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
          content: '';
          height: 1px;
          left: 0;
          margin-top: calc(#{$plyr-control-padding} / 2);
          overflow: hidden;
          position: absolute;
          right: 0;
          top: 100%;
        }

        &.plyr__tab-focus::after,
        &:hover::after {
          border-right-color: currentColor;
        }
      }
    }

    .plyr__control[role='menuitemradio'] {
      padding-left: $plyr-control-padding;

      &::before,
      &::after {
        border-radius: 100%;
      }

      &::before {
        background: rgba(#000, 0.1);
        content: '';
        display: block;
        flex-shrink: 0;
        height: 16px;
        margin-right: $plyr-control-spacing;
        transition: all 0.3s ease;
        width: 16px;
      }

      &::after {
        background: #fff;
        border: 0;
        height: 6px;
        left: 12px;
        opacity: 0;
        top: 50%;
        transform: translateY(-50%) scale(0);
        transition: transform 0.3s ease, opacity 0.3s ease;
        width: 6px;
      }

      &[aria-checked='true'] {
        &::before {
          background: $plyr-control-toggle-checked-background;
        }
        &::after {
          opacity: 1;
          transform: translateY(-50%) scale(1);
        }
      }

      &.plyr__tab-focus::before,
      &:hover::before {
        background: rgba($plyr-color-gray-900, 0.1);
      }
    }

    // Option value
    .plyr__menu__value {
      align-items: center;
      display: flex;
      margin-left: auto;
      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
      overflow: hidden;
      padding-left: calc(#{$plyr-control-padding} * 3.5);
      pointer-events: none;
    }
  }
}