@import "variables";

.pgn__menu {
  border-radius: $menu-border-radius;
  box-shadow: $menu-box-shadow;
  background-color: $menu-bg;
  overflow: auto;
  max-height: $menu-max-height;

  .pgn__menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: $menu-item-width;
    color: $menu-item-color;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: $menu-item-bg;
    border: $menu-item-border;
    padding: $menu-item-padding-y $menu-item-padding-x;
    height: $menu-item-height;

    @media (max-width: $max-width-xs) {
      width: $menu-item-width-xs;
    }

    .pgn__menu-item-text {
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .pgn__menu-item-content-spacer {
      flex-grow: 1;
    }

    @include hover {
      text-decoration: none;
      color: $menu-item-hover-color;
      border-color: $menu-item-hover-border-color;
      background: $menu-item-hover-bg;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
      opacity: $btn-disabled-opacity;
    }

    &.focus,
    &:focus {
      font-weight: $font-weight-bolder;
      background-color: $menu-item-focus-bg;
    }

    .btn-icon-before {
      margin-inline-end: .5rem;
      margin-left: calc(#{$menu-item-icon-margin-left} * -1);

      [dir="rtl"] & {
        margin-right: calc(#{$menu-item-icon-margin-right} * -1);
        margin-left: .5rem;
      }
    }

    .btn-icon-after {
      margin-inline-start: .5rem;
      margin-right: calc(#{$menu-item-icon-margin-right} * -1);

      [dir="rtl"] & {
        margin-right: .5rem;
        margin-left: calc(#{$menu-item-icon-margin-left} * -1);
      }
    }
  }
}

.pgn__menu-select {
  .btn.btn-link {
    color: $menu-select-btn-link-color;

    &:hover,
    &:focus {
      text-decoration-line: $menu-select-btn-link-text-decoration-line;
      text-decoration-thickness: $menu-select-btn-link-text-decoration-thickness;
    }
  }

  .pgn__menu-select-popup {
    position: relative;
  }
}