@import "../settings/variables";

.menu {
  &-wrapper {
    display: flex;
    max-height: inherit;
    outline: none;
    width: inherit;
  }

  display: flex;
  flex-direction: column;
  max-height: inherit;
  outline: 0;
  width: 100%;

  &__options,
  &__footer,
  &__header,
  &__search,
  &__group,
  &__item {
    width: 100%;
  }

  &__options {
    flex-grow: 1;
    min-height: 32px;
    padding: $dropdowns-options-padding;
    position: relative;

    &--scrollable {
      overflow-y: auto;
    }
  }

  &__footer {
    border-top: 1px solid $menu-footer-border-top-color;
  }

  &__header {
  }

  &__group {
    cursor: default;
    color: $menu-item-color;
    font-size: $menu-item-font-size;
    font-weight: $menu-group-font-weight;
    letter-spacing: $menu-item-letter-spacing;
    line-height: $menu-item-line-height;

    &--clickable {
      cursor: pointer;
    }

    &:not(:first-child) {
      padding-top: spacing(md);
    }
  }

  &__item {
    color: $menu-item-color;
    cursor: pointer;
    font-size: $menu-item-font-size;
    font-weight: $menu-item-font-weight;
    letter-spacing: $menu-item-letter-spacing;
    line-height: $menu-item-line-height;
    list-style-type: none;
    padding: $menu-item-padding-vertical $menu-item-padding-horizontal;

    a {
      // We decided to use a negative margin trick here to allow us to continue to use list
      // navigation without having to rewrite a bunch of code in js
      color: $menu-item-color;
      display: block;
      margin: $menu-item-padding-vertical * -1 $menu-item-padding-horizontal *
        -1;
      padding: spacing(xs) spacing(lg);
      text-decoration: none;
    }

    a:hover {
      color: $menu-item-color;
      text-decoration: none;
    }

    &--focus,
    &--hover,
    &[data-highlighted="true"],
    &:hover {
      background-color: $menu-item-hover-color;
    }

    &--selected {
      color: $menu-item-selected-color;
      font-weight: 700;

      a {
        color: $menu-item-selected-color;
        text-decoration: none;
      }

      a:hover {
        color: $menu-item-selected-color;
        text-decoration: none;
      }
    }

    &--disabled {
      color: $menu-item-disabled-color;
      font-weight: $menu-item-font-weight;
    }
  }
}