/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *       layout sass file
 *  ----------- *** ------------
 *
 */
// containers

@import "_sn-layout_variables";
@import "_sn-layout_mixins";

.sn-structure {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sn-layout {
  position: relative;
  @include flexbox();
  @include flexdirection(row);
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;

  // Sysbar Container

  &__sysbar {
    position: relative;
    @include flexitem(1, 1, 100%);
    width: 100%;
    height: $layout-sysbar-height;
    background-color: $layout-sysbar-background-color;
    z-index: $z-layout-sysbar;
    box-shadow: 0 0px 1px 0 rgba(0,0,0,.14), 0 0px 0px -5px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.12);
  } // sysbar

  &__sysbar ~ &__drawer {
    height: calc(100% - #{$layout-sysbar-height}) !important;
  }

  &__sysbar ~ &__main {
    height: calc(100% - #{$layout-sysbar-height}) !important;
    min-height: calc(100vh - #{$layout-sysbar-height}) !important;
  }

  &__sysbar ~ &__aside {
    height: calc(100% - #{$layout-sysbar-height}) !important;
    min-height: calc(100vh - #{$layout-sysbar-height}) !important;
  }

  // Drawer Container

  &__drawer {
    transition: all .125s;
    z-index: $z-layout-drawer-oculted;
    position: relative;
    @include flexitem(0, 1, $layout-drawer-width);
    background-color: $layout-drawer-background-color;
    height: 100%;

    &#{&}--collapsed {
      @extend %drawer-collapsed;
      @extend %nav-collapsed--drawer;
    }
  } // drawer



  // Main Container

  &__main, form {
    position: relative;
    @include flexitem(1, 1, 1%);
    @include flexbox();
    @include flexdirection(column);
    overflow: hidden;
    height: 100%;
    background-color: transparent;


    // Main Header Container
    &__header {
      position: relative;
      @include flexitem(0, 0, $layout-header-height);
      min-width: $layout-header-height;
      background-color: $layout-header-background-color;
      border-bottom: 1px solid $layout-containers-borders;
    } // header

    // Main Subheader Container
    &__subheader {
      position: relative;
      @include flexitem(0, 0, $layout-subheader-height);
      background-color: $layout-subheader-background-color;
      border-bottom: 1px solid $layout-containers-borders;
    } // subheader

    // Main Content Container
    &__content {
      position: relative;
      @include flexitem(1 ,1, auto);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    } // content

    &__content & {
      &__header {
        min-height: $layout-header-height;
      }
      &__footer {
        min-height: $layout-footer-height;
      }
    } // content

    // Main Footer Container
    &__footer {
      position: relative;
      @include flexitem(1, 0, $layout-footer-height);
      min-width: $layout-footer-height;
      border-top: 1px solid $layout-containers-borders;
      background-color: $layout-footer-background-color;
      width: 100%;
    } // footer

  } // main

  // Main Aside
  &__aside {
    position: relative;
    @include flexitem(0, 1, 240px);
    height: 100%;
    border-left: 1px solid $layout-containers-borders;
    background-color: #E0E0E0;
  }

  &__obfuscator {
    // background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: $z-layout-obfuscator;
    visibility: hidden;
    transition-property: background-color;
    pointer-events: none;
    @include animation-default();
    background-color: $default-obfuscator-background-color;
    @supports (pointer-events: auto) {
      background-color: $default-obfuscator-background-color;
      opacity: 0;
      transition-property: opacity;
      visibility: visible;
    }
  }

  .sn-drawer-button {
    /* button reset */
    margin: 0;
    background: transparent;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    /* styles */
    display: none;
    height: 48px;
    width: 48px;
    min-height: 48px;
    min-width: 48px;
    padding: 12px;
    margin-left: 0;
    color: $layout-drawer-button-color;
    border: none;
    outline: none;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.2;
    + .sn-brand {
      margin: 0;
    }
    &:hover, &:active {
      color: $layout-drawer-button-color;
    }
  }

  // RESPONSIVE SETTINGS

  @media screen and (max-width: $layout-responsive-breakpoint) {
    .sn-layout__drawer {
      display: none;
      position: absolute;
      left: 0;
      width: $layout-drawer-width !important;
      height: 100vh !important;
    }
    .sn-layout__sysbar {
      .sn-sysbar {
        .sn-drawer-button {
          display: block;
        }
      }
    }
    .sn-layout__main {
      .sn-header {
        .sn-drawer-button {
          display: block;
        }
      }
    }
    .sn-layout__sysbar ~ .sn-layout__main {
      .sn-header {
        .sn-drawer-button {
          display: none;
        }
      }
    }
  }

  &.sn-layout--open-drawer {
    @media screen and (max-width: $layout-responsive-breakpoint) {
      .sn-layout__drawer {
        display: block;
        z-index: $z-layout-drawer-oculted;
        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.14),
                    2px 3px 1px -2px rgba(0, 0, 0, 0.2),
                    2px 1px 5px 0 rgba(0, 0, 0, 0.12);
        + .sn-layout__obfuscator {
          visibility: visible;
          display: block;
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }
} // layout