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

.plyr__menu__container {
  animation: plyr-popup 0.2s ease;
  background: $plyr-menu-background;
  border-radius: 4px;
  bottom: 48px;
  box-shadow: $plyr-menu-shadow;
  color: $plyr-menu-color;
  font-size: $plyr-font-size-base;
  position: absolute;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
  overflow: auto;

  > div {
    min-width: 140px;
    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);
  }

  [role='menu'] {
    padding: $plyr-control-padding;
    overflow: auto;
    max-height: var(--menu-max-height);
  }

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

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

  &__header {
    padding: $plyr-control-padding;
    background: $plyr-menu-background-back;
    z-index: 1;
  }

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

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

    &:hover {
      color: $plyr-video-control-background-hover;
    }

    &::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;
      display: grid;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 2px 0;

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

      &.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(#fff, 0.2);
      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);
      }
    }

    &:not([aria-checked="true"]).plyr__tab-focus::before,
    &:not([aria-checked="true"]):hover::before {
      background: rgba(#fff, 0.4);
    }
  }

  // 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;
  }
}

.plyr--audio .plyr__menu__container {
  width: calc(100% - 4px);
  bottom: 2px;
  right: 2px;
  height: calc(100% - 4px);
  border-radius: $plyr-menu-audio-border-radius;

  [role='menu'] {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;

    .plyr__control[role="menuitem"] {
      width: 100%;
    }
  }

  & > div {
    display: grid;
    align-items: center;
    width: 100%;
    height: 100%;

    & > div {
      display: flex;
      align-items: center;
      height: 100%;
      overflow: hidden;
    }
  }

  &__header {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .plyr__control {
    margin-top: 2px;
    width: auto;

    &--back {
      padding-left: 24px;
      padding-right: 12px;
    }
  }
}