@import '../base/base';
@import '_sg-variables/all';
@import '_sg-mixins/all';
@import 'sg-fonts/sg-icons';
@import 'sg-header/header';
@import 'sg-highlight/highlight';
@import 'sg-logo/logo';
@import 'sg-markdown/markdown';
@import 'sg-menu/menu';
@import 'sg-tabs/tabs';
@import 'sg-version/version';
@import 'sg-usedModules/usedModules';
@import 'sg-sidebar/sidebar';
@import 'sg-example/example';

body {
  color: $sg-text-grey;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  height: 100%;
  position: relative;

  > aside {
    position: fixed;
    top: 0;
    left: 0;

    overflow: hidden;

    height: 100%;
    width: 6vw;
    transition: width .125s ease-in, box-shadow .25s ease-out;

    @include media('>md') {
      width: 15vw;
    }
  }

  > main {
    overflow: hidden;

    width: 94vw;
    margin-left: 6vw;

    @include media('>md') {
      width: 85vw;
      margin-left: 15vw;
    }
  }

  &.-openSidebar {
    > aside {
      width: 94vw;
      box-shadow: 0 0 50vw 100vw transparentize($sg-text-grey, .5);

      @include media('>md') {
        width: 15vw;
        box-shadow: none;
      }
    }
  }
}