// Component: Mobile Menu
// See 03-components/menu/menu--main/mobile-menu-es6.js.

@use 'sass:math';
@use '00-config' as *;

$mobile-menu-bg-color: rgba(
  gesso-color(ui, generic, background-light),
  0.98
) !default;
$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
$mobile-menu-submenu-fallback-bg-color: gesso-color(
  ui,
  generic,
  background-lighter
) !default;
$mobile-menu-submenu-bg-color: rgba(
  gesso-color(ui, generic, background-lighter),
  0.98
) !default;
$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
$mobile-menu-submenu-link-hover-color: gesso-color(
  ui,
  generic,
  text-darker
) !default;
$mobile-menu-button-height: 54px;
$mobile-menu-button-width: 44px;
$mobile-menu-font-size: gesso-font-size(5);
$mobile-menu-line-height: gesso-line-height(base);

.c-mobile-menu {
  background-color: $mobile-menu-bg-color;
  display: none;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding-block: 0 4px;
  position: fixed;
  width: 100%;
  z-index: gesso-z-index(modal);

  &.is-open {
    display: block;
  }
}

.c-mobile-menu__menu {
  @include list-clean();
  margin: 0.75em 0 0;
}

.c-mobile-menu__item {
  margin: 0;
  padding: 0;
  position: relative;
}

.c-mobile-menu__link {
  background-color: transparent;
  border: 0;
  color: $mobile-menu-link-color;
  display: block;
  font-family: gesso-font-family(system);
  font-size: rem($mobile-menu-font-size);
  font-weight: gesso-font-weight(bold);
  line-height: $mobile-menu-line-height;
  margin: 0;
  padding: rem(
      math.div(
        $mobile-menu-button-height -
          ($mobile-menu-font-size * $mobile-menu-line-height),
        2
      )
    )
    rem(gesso-spacing(2));
  text-align: start;
  text-decoration: none;
  white-space: normal;
  width: auto;
  z-index: 3;

  &:hover,
  &:focus,
  &:active,
  &.is-active {
    color: $mobile-menu-link-hover-color;
  }

  &.has-subnav {
    margin-inline-end: $mobile-menu-button-width;
  }
}

button.c-mobile-menu__link {
  cursor: pointer;
}

.c-mobile-menu__subnav-arrow {
  @include focus();
  @include image-replace($mobile-menu-button-width, $mobile-menu-button-height);
  @include svg-background(mobile-arrow-down);
  background-attachment: initial;
  background-color: initial;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 19px 12px;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  inset-block-start: 0;
  inset-inline-end: 0;
  outline-offset: 0;
  position: absolute;
  vertical-align: top;
  z-index: 2;

  &[aria-expanded='true'] {
    @include svg-background(mobile-arrow-up);
  }
}

.c-mobile-menu__subnav {
  background-color: $mobile-menu-submenu-bg-color;
  list-style: none;
  margin: 0;
  padding: 0;

  .c-mobile-menu__link {
    color: $mobile-menu-submenu-link-color;
    padding-inline-start: gesso-spacing(3);

    &:hover,
    &:focus,
    &:active {
      color: $mobile-menu-submenu-link-hover-color;
    }
  }
}

.c-mobile-menu__section-inner {
  @include layout-constrain();
  background-color: $mobile-menu-submenu-bg-color;
}
