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

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

.o-aside-layout {
  &__sidebar {
    @include fixed(0, auto, 0, 0);
    z-index: $layer-sticky;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.5s $timing-function;
    width: 100%;

    @include media-breakpoint-up(md) {
      @include fixed(0, auto, 0, 0);
      color: $color-primary;
      width: $aside-width;
      z-index: $layer-sticky;
      transform: none;
    }

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

    @media print {
      display: none;
    }
  }

  &__burger {
    @include fixed(1em, 1em, auto, auto);
    z-index: $layer-burger;
    height: 2em;
  }
  &__content {
    box-sizing: border-box;
    width: 100%;

    @include media-breakpoint-up(md) {
      padding-left: $aside-width;
    }

    @media print {
      padding-left: 0;
      box-sizing: content-box;
    }
  }
}