// @file
// Styles for the main menu.

@use '00-config' as *;

.c-dropdown-menu {
  @include list-inline;

  > .c-dropdown-menu__item {
    display: inline-block;
    position: relative;

    > .c-dropdown-menu__link {
      background-color: transparent;
      border: 0;
      display: inline-block;
      font-weight: gesso-font-weight(semibold);
      margin-inline-end: gesso-spacing(5);
      padding: 0;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;

      &.has-subnav {
        padding-inline-end: 25px;
      }

      &.has-subnav::after {
        @include svg-background(menu-arrow-down);
        background-size: 16px 16px;
        content: '';
        display: block;
        height: 16px;
        inset-block-start: 50%;
        inset-inline-end: 5px;
        overflow: hidden;
        position: absolute;
        transform: translateY(-40%);
        width: 16px;
      }
    }

    > button.c-dropdown-menu__link {
      @include text-button;
      @include link(gesso-color(text, link), gesso-color(text, link-hover));
    }
  }
}

.c-dropdown-menu__item {
  margin-block-end: 0;
}

.c-dropdown-menu__link.has-subnav {
  position: relative;
}

.c-dropdown-menu__toggle {
  @include text-button;
  @include image-replace(16px, 16px);
  @include svg-background(menu-arrow-down);
  display: block;
  inset-block-start: 50%;
  inset-inline-end: 5px;
  position: absolute;
  transform: translateY(-40%);

  svg {
    pointer-events: none;
  }
}

.c-dropdown-menu__subnav {
  @include list-clean;
  background-color: gesso-color(ui, generic, background-dark);
  color: gesso-color(ui, generic, text-lighter);
  display: none;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: rem(gesso-spacing(1)) 0 0;
  padding: 0;
  position: absolute;

  .c-dropdown-menu__item.has-subnav {
    position: relative;
  }

  .c-dropdown-menu__link {
    color: currentColor;
    display: block;
    line-height: gesso-line-height(short);
    padding: rem(gesso-spacing(2)) calc(#{rem(gesso-spacing(3))} + 7px)
      rem(gesso-spacing(2)) rem(gesso-spacing(3));
    position: relative;
    text-decoration: none;
    width: rem(200px);

    &:hover,
    &:focus {
      background-color: gesso-color(ui, generic, background-darker);
    }

    &.has-subnav::after {
      @include image-replace(16px, 16px);
      @include svg-background(menu-arrow-right);
      background-size: 16px 16px;
      content: '';
      display: block;
      inset-block-start: 50%;
      inset-inline-end: 5px;
      position: absolute;
      transform: translateY(-50%);
    }
  }

  .c-dropdown-menu__subnav-toggle {
    @include text-button;
    @include image-replace(
      rem(gesso-spacing(3) + 2px),
      rem(gesso-spacing(3) + 2px)
    );
    @include svg-background(menu-arrow-right);
    background-size: rem(gesso-spacing(3)) rem(gesso-spacing(3));
    border: 1px solid currentColor;
    color: inherit;
    display: block;
    inset-block-start: 50%;
    inset-inline-end: 5px;
    position: absolute;
    transform: translateY(-50%);

    &:hover,
    &:focus-visible {
      background-color: gesso-color(ui, generic, background-darker);
    }
  }

  .c-dropdown-menu__subnav {
    margin: 0;
  }
}
