// @file
// Component: Overlay Menu

@use '00-config' as *;

$overlay-menu-bg-color: rgba(
  gesso-color(ui, generic, background-light),
  0.98
) !default;

.c-overlay-menu {
  background-color: transparent;
  height: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  position: fixed;
  transition: all gesso-duration(long) gesso-easing(ease-in-out);
  width: 0;
  z-index: -1;

  &.is-open {
    background-color: $overlay-menu-bg-color;
    height: 100vh;
    overflow-y: auto;
    width: 100%;
    z-index: gesso-z-index(modal);
  }
}

.c-overlay-menu__menu {
  @include list-clean;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  font-size: rem(gesso-font-size(8));
  height: calc(100% - 55px);
  justify-content: center;
  width: 100%;
}

.c-overlay-menu__link {
  margin-inline-end: 0;
  text-decoration: none;
}
