@use '../settings/variables' as v;
@use '../settings/functions' as f;

.qpp-c-dropdown-menu__box {
  margin-top: v.$spacing-8;
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
}

.qpp-c-dropdown-menu,
.qppds .qpp-c-dropdown-menu {
  &.qpp-c-dropdown-menu__list,
  .qpp-c-dropdown-menu__list {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    outline: 0;
    margin: 0;
    position: relative;
    max-height: 264px;
    max-width: 400px;
  }

  &.qpp-c-dropdown-menu__box {
    margin-top: v.$spacing-8;
  }

  .qpp-c-dropdown-menu__item {
    font-size: v.$font-size-14;
    line-height: v.$line-height-xs;
    padding-left: v.$spacing-24;
    padding-right: v.$spacing-24;
    padding-top: v.$spacing-16;
    padding-bottom: v.$spacing-16;
    border: 0;
    margin: 0;
    outline: 0;
    border-bottom: 1px solid v.$gray-10;
    font-weight: v.$font-regular;
    color: v.$gray-80;
    background-color: v.$white;
    width: auto;
    overflow: hidden;
    box-sizing: border-box;
    font-family: v.$font-rubik;
    white-space: nowrap;
    letter-spacing: 0;
    display: flex;
    position: relative;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;

    svg {
      font-size: v.$font-size-20;
      color: inherit;
    }

    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0.25em 0;
      margin: -0.25em 0;
    }

    .qpp-c-dropdown-menu__icon {
      margin-right: v.$spacing-8;
      margin-top: f.rem(-2px);
      margin-bottom: f.rem(-2px);

      > svg {
        fill: currentColor;
        width: 1em;
        height: 1em;
        display: inline-block;
        flex-shrink: 0;
        user-select: none;
      }
    }

    &:focus {
      box-shadow: inset 0 0 0 4px v.$blue-10, inset 0 0 0 5px v.$blue-70;
      background-color: v.$white;
    }

    &:hover {
      background-color: v.$gray-04;
    }

    &--header {
      background-color: v.$gray-04;
      font-weight: v.$font-medium;
      cursor: default;

      &[aria-disabled] {
        opacity: 1;
      }
    }

    &--loading {
      cursor: default;

      &[aria-disabled] {
        opacity: 1;
      }

      .qpp-c-dropdown-menu__spinner {
        margin-right: 1rem;
        color: v.$blue-70;
      }
    }
  }
}