// @file
// Component: Side Menu

@use '00-config' as *;

$side-menu-bg-color: gesso-color(ui, generic, background-light);

.c-side-menu {
  background: $side-menu-bg-color;
  font-size: rem(gesso-font-size(5));
  height: 100vh;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  position: fixed;
  transform: translate3d(-100%, 0, 0);
  transition: transform gesso-duration(short) gesso-easing(ease-in);
  width: rem(300px);
  z-index: -1;

  &.is-open {
    transform: translate3d(0, 0, 0);
    z-index: gesso-z-index(nav);
  }

  li {
    padding-inline-start: gesso-spacing(2);
  }
}

.c-side-menu__menu,
.c-side-menu .c-menu__subnav {
  background: $side-menu-bg-color;
  inset-inline-start: 0;
  position: absolute;
  width: 100%;
}

.c-side-menu__menu {
  height: calc(100% - 55px);
  inset-block-start: 55px;
}

.c-side-menu .c-menu__subnav {
  height: 100%;
  inset-block-start: 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform gesso-duration(short) gesso-easing(ease-in);

  &.is-open {
    transform: translate3d(0, 0, 0);
  }
}

.c-side-menu .c-menu__item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: gesso-spacing(1) gesso-spacing(2);
  width: 100%;
}

.c-side-menu__toggle {
  @include text-button;
  margin-inline-start: gesso-spacing(2);
  padding: gesso-spacing(0.5);

  &[tabindex='-1'] {
    display: none;
  }
}

.c-side-menu__toggle-icon {
  @include svg-background(mobile-arrow-down);
  @include image-replace(22px, 22px);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  display: inline-block;
  transform: rotate(270deg);
  vertical-align: middle;
}

.c-side-menu__back {
  @include text-button;
  color: gesso-color(text, link);

  &::before {
    @include svg-background(mobile-arrow-down);
    @include image-replace(22px, 22px);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    content: '';
    display: inline-block;
    margin-inline-end: gesso-spacing(1);
    transform: rotate(90deg);
    vertical-align: middle;
  }

  &:hover,
  &:focus {
    color: gesso-color(text, link-hover);
  }
}

.c-side-menu__section-title {
  font-size: rem(gesso-font-size(7));
  font-weight: gesso-font-weight(semibold);
  padding: gesso-spacing(1) gesso-spacing(2);
}
