@import '../settings/variables';
@import '../tools/mixins/position';

$timing-function: cubic-bezier(0.19, 1, 0.22, 1);

.c-mobile-menu {
  @include fixed(0, auto, 0, 0);
  width: 100vw;
  z-index: $layer-screen-attached;
  transform: translateX(-100%);
  will-change: transform;
  transition: transform 0.5s $timing-function;
  color: $color-neutral;

  &--background {
    background-color: $color-side-menu-background;
  }

  &--show {
    transform: translateX(0);
  }

  &--light {
    background: $color-background;
  }
}