@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'common/var' as *;

@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;

  background-color: getCssVar('color-neutral-1');

  @include when(vertical) {
    flex-direction: column;
  }

  @media #{map.get($breakpoints-spec, 'md-and-down')} {
    margin-left: calc(getCssVar('container-aside-width') * -1);
    overflow-x: hidden;
    transition: margin getCssVar('transition-duration');

    @include when(off-canvas) {
      margin-left: 0;
      margin-right: calc(getCssVar('container-aside-width') * -1);
    }
  }
}