$layout-content-selector: '> .content' !default;
$layout-content-wrapper-selector: 'main' !default;
$layout-main-selector: '.application' !default;
$layout-sidebar-font-weight: $font-weight-normal !default;
$layout-sidebar-footer-height: rem-calc(60) !default;
$layout-sidebar-footer-selector: 'footer' !default;
$layout-sidebar-footer-avatar-selector: '.avatar' !default;
$layout-sidebar-footer-title-selector: '.name' !default;
$layout-sidebar-footer-actions-selector: '.actions' !default;
$layout-sidebar-footer-actions-icon: cog !default;
$layout-sidebar-collapse-duration: .325s;
$layout-sidebar-header-height: 60px !default;
$layout-sidebar-header-logo-height: $layout-sidebar-header-height * .5 !default;
$layout-sidebar-header-selector: '> header' !default;
$layout-sidebar-heading-font-size: $small-font-size !default;
$layout-sidebar-heading-font-weight: $font-weight-extrabold !default;
$layout-sidebar-include-footer: true !default;
$layout-sidebar-include-header: true !default;
$layout-sidebar-nav-background-color: #191c1f !default;
$layout-sidebar-nav-title-background-color: lighten($layout-sidebar-nav-background-color, 5%) !default;
$layout-sidebar-nav-text-color: #f2f2f2 !default;
$layout-sidebar-nav-classes: dashboard, paint, settings !default;
$layout-sidebar-nav-icons: dashboard, paint-brush, cog !default;
$layout-sidebar-nav-link-active-background-color: lighten($layout-sidebar-nav-title-background-color, 5%) !default;
$layout-sidebar-nav-link-active-text-color: $layout-sidebar-nav-text-color !default;
$layout-sidebar-nav-link-height: rem-calc(60) !default;
$layout-sidebar-nav-link-hover-background-color: $layout-sidebar-nav-title-background-color !default;
$layout-sidebar-nav-link-icon-padding: rem-calc(10) !default;
$layout-sidebar-nav-link-icon-roundness: rem-calc(10) !default;
$layout-sidebar-nav-link-icon-width: rem-calc(36) !default;
$layout-sidebar-nav-link-text-color: darken($layout-sidebar-nav-text-color, 30%) !default;
$layout-sidebar-nav-padding: $column-gutter / 2 !default;
$layout-sidebar-nav-selector: '> nav' !default;
$layout-sidebar-nav-list-selector: '> ul' !default;
$layout-sidebar-nav-list-item-selector: '> li' !default;
$layout-sidebar-nav-title-height: rem-calc(40) !default;
$layout-sidebar-nav-title-text-color: darken($layout-sidebar-nav-text-color, 50%) !default;
$layout-sidebar-nav-width-collapsed: $layout-sidebar-nav-link-icon-width + 2 * $layout-sidebar-nav-padding !default;
$layout-sidebar-nav-width: rem-calc(260) !default;
$layout-sidebar-nav-bubble-selector: '.bubble' !default;
$layout-sidebar-nav-bubble-width: rem-calc(24) !default;
$layout-sidebar-nav-bubble-background-color: $steel !default;
$layout-sidebar-selector: '.sidebar' !default;

$include-html-paint-layout: true !default;

%layout-sidebar-heading {
  font-size: $layout-sidebar-heading-font-size;
  font-weight: $layout-sidebar-heading-font-weight;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@mixin layout-navigation-icons {
  @for $i from 1 through length($layout-sidebar-nav-classes) {
    $class-name: nth($layout-sidebar-nav-classes, $i);
    $icon-name: nth($layout-sidebar-nav-icons, $i);

    .#{$class-name} i {
      @include icon($icon-name);
    }
  }
}

@mixin layout-sidebar {
  $nav-top-margin: 0;
  $nav-bottom-margin: 0;
  $subnav-selector: '#{$layout-sidebar-nav-list-item-selector} #{$layout-sidebar-nav-list-selector}';

  @if $layout-sidebar-include-header {
    $nav-top-margin: $layout-sidebar-header-height;
  }

  @if $layout-sidebar-include-footer {
    $nav-bottom-margin: $layout-sidebar-footer-height;
  }

  #{$layout-sidebar-selector} {
    background-color: $layout-sidebar-nav-background-color;
    float: left;
    font-weight: $layout-sidebar-font-weight;
    height: 100%;
    position: relative;
    transform: translate3d(0, 0, 0);
    transition: width $layout-sidebar-collapse-duration cubic-bezier(.78, .01, .27, 1);
    transition-delay: .015s;
    width: $layout-sidebar-nav-width;

    @if $layout-sidebar-include-header {
      #{$layout-sidebar-header-selector} {
        height: $layout-sidebar-header-height;
        line-height: $layout-sidebar-header-height;
        padding: 0 $layout-sidebar-nav-padding;

        img {
          @include single-transition(padding, 150ms, linear);

          height: $layout-sidebar-header-logo-height;
          margin-right: $layout-sidebar-nav-padding / 2;
        }

        h1 {
          @extend %layout-sidebar-heading;

          color: $white;
          display: inline-block;
          -webkit-font-smoothing: $body-font-smoothing;
          margin: 0;
          opacity: 1;
          transition: 
            opacity $layout-sidebar-collapse-duration / 2 ease-in,
            width $layout-sidebar-collapse-duration / 1.5 ease-in;
          width: auto;
        }
      }
    }

    #{$layout-sidebar-nav-selector} {
      @include layout-sidebar-nav($nav-bottom-margin, $nav-top-margin, $subnav-selector);
    }

    @if $layout-sidebar-include-footer {
      #{$layout-sidebar-footer-selector} {
        @include layout-sidebar-footer-with-actions;

        background: $layout-sidebar-nav-title-background-color;
        bottom: 0;
        color: $layout-sidebar-nav-link-text-color;
        height: $layout-sidebar-footer-height;
        left: 0;
        line-height: $layout-sidebar-footer-height;
        padding: 0 $layout-sidebar-nav-padding;
        position: absolute;
        right: 0;
        white-space: nowrap;
      }
    }

    &.collapsed {
      @include layout-sidebar-nav-collapsed;

      @if $layout-sidebar-include-footer {
        #{$layout-sidebar-footer-selector} {
          @include layout-sidebar-footer-with-actions-collapsed;
        }
      }
    }
  }
}

@mixin layout {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #{$layout-main-selector} {
    height: 100%;

    #{$layout-content-wrapper-selector} {
      height: 100%;
      overflow: hidden;
      position: relative;

      #{$layout-content-selector} {
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}

@mixin layout-sidebar-nav($nav-bottom-margin: 0, $nav-top-margin: 0, $subnav-selector: '> li > ul') {
  bottom: $nav-bottom-margin;
  left: 0;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: $nav-top-margin;

  header {
    background-color: $layout-sidebar-nav-title-background-color;
    color: $layout-sidebar-nav-title-text-color;
    line-height: $layout-sidebar-nav-title-height;
    padding: 0 $layout-sidebar-nav-padding;
    white-space: nowrap;

    h1 {
      @extend %layout-sidebar-heading;

      color: $layout-sidebar-nav-link-text-color;
      display: inline-block;
      margin: 0;
    }

    .toggle-collapse {
      color: $layout-sidebar-nav-link-text-color;
      float: right;
      line-height: $layout-sidebar-nav-title-height;

      button {
        @include icon(chevron-circle-left);

        background-color: transparent;
        border-width: 0;
        margin-bottom: 0;
      }
    }
  }

  #{$layout-sidebar-nav-list-selector} {
    @include layout-navigation-icons();

    list-style-type: none;
    margin: 0;
    padding: 0;

    a {
      @include single-transition(background-color, 150ms, linear);

      border-bottom: 1px solid $layout-sidebar-nav-title-background-color;
      display: block;
      font-size: $paragraph-font-size;
      -webkit-font-smoothing: $header-font-smoothing;
      line-height: $layout-sidebar-nav-link-height;
      padding: 0 $layout-sidebar-nav-padding;
      text-decoration: none;
      white-space: nowrap;

      &,
      &:visited {
        color: $layout-sidebar-nav-link-text-color;
      }

      &:hover {
        background-color: $layout-sidebar-nav-link-hover-background-color;
      }

      &.active {
        background-color: $layout-sidebar-nav-link-active-background-color;
        color: $layout-sidebar-nav-link-active-text-color;

        &:hover {
          background-color: lighten($layout-sidebar-nav-link-active-background-color, 5%);
          color: lighten($layout-sidebar-nav-link-active-text-color, 5%);
        }
      }

      > span {
        transition: opacity $layout-sidebar-collapse-duration / 2 ease-in;
      }
    }

    i {
      @include single-transition(margin, 150ms, linear);

      border-radius: $layout-sidebar-nav-link-icon-roundness;
      color: $layout-sidebar-nav-link-text-color;
      font-size: $base-font-size;
      margin-right: $layout-sidebar-nav-padding;
      padding: $layout-sidebar-nav-link-icon-padding 0;
      text-align: center;
      width: $layout-sidebar-nav-link-icon-width;
    }

    #{$layout-sidebar-nav-bubble-selector} {
      background-color: $layout-sidebar-nav-bubble-background-color;
      border-radius: $global-rounded;
      color: $white;
      float: right;
      font-size: $small-font-size * .8;
      font-weight: $font-weight-extrabold;
      letter-spacing: -1px;
      line-height: $layout-sidebar-nav-bubble-width;
      margin-right: $layout-sidebar-nav-link-icon-padding / 2;
      margin-top: ($layout-sidebar-nav-link-height - $layout-sidebar-nav-bubble-width) / 2;
      min-width: $layout-sidebar-nav-bubble-width;
      text-align: center;
    }

    #{$subnav-selector} {
      background-color: darken($layout-sidebar-nav-background-color, 5%);
      border-left: solid 3px lighten($layout-sidebar-nav-background-color, 5%);
      margin: 0;
      padding: 0;

      a span:not(#{$layout-sidebar-nav-bubble-selector}) {
        color: darken($layout-sidebar-nav-link-text-color, 10%);
      }

      i {
        color: transparentize($layout-sidebar-nav-link-text-color, .5);
        font-size: $small-font-size !important;
      }
    }
  }
}

@mixin layout-sidebar-nav-collapsed {
  width: $layout-sidebar-nav-width-collapsed;

  #{$layout-sidebar-nav-selector} #{$layout-sidebar-nav-list-selector} a {
    position: relative;

    > i {
      margin-right: 0;
    }

    > span:not(#{$layout-sidebar-nav-bubble-selector}) {
      opacity: 0;
      width: 0;
    }

    > #{$layout-sidebar-nav-bubble-selector} {
      left: $layout-sidebar-nav-link-icon-width;
      position: absolute;
      top: - $layout-sidebar-nav-link-icon-padding / 2;
    }
  }

  h1 {
    opacity: 0;
    width: 0;
  }

  .toggle-collapse {
    float: none;
    margin-bottom: 0;

    button {
      @include icon(caret-square-o-right);
    }
  }

  #{$layout-sidebar-nav-selector} header {
    h1 {
      display: none;
    }

    .toggle-collapse {
      float: none;

      button {
        @include icon(chevron-circle-right);

        width: $layout-sidebar-nav-link-icon-width;
      }
    }
  }
}

@mixin layout-sidebar-footer-with-actions {
  #{$layout-sidebar-footer-avatar-selector} {
    float: left;
    margin-right: $layout-sidebar-nav-padding;

    img {
      border-radius: 50%;
      height: $layout-sidebar-nav-link-icon-width;
      width: $layout-sidebar-nav-link-icon-width;
    }
  }

  #{$layout-sidebar-footer-title-selector} {
    color: $layout-sidebar-nav-link-text-color;
    margin-right: $layout-sidebar-nav-padding / 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #{$layout-sidebar-footer-actions-selector} {
    display: inline-block;
    float: right;
    line-height: $layout-sidebar-footer-height;

    button {
      @include button-icon($layout-sidebar-footer-actions-icon);

      background-color: transparent;
      border: 0;
      color: $layout-sidebar-nav-link-text-color;
      margin-bottom: 0;
    }
  }
}

@mixin layout-sidebar-footer-with-actions-collapsed {
  #{$layout-sidebar-footer-avatar-selector},
  #{$layout-sidebar-footer-title-selector} {
    display: none;
  }

  #{$layout-sidebar-footer-actions-selector} {
    display: block;
    float: none;
    text-align: center;
  }
}

@include exports('paint-layout') {
  @if $include-html-paint-layout {
    @include layout;
    @include layout-sidebar;
  }
}