$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-header-height: rem-calc(60) !default;
$layout-sidebar-header-logo-height: $layout-sidebar-header-height * 0.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-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-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;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@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;

  @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-family: $header-font-family;
    font-weight: $layout-sidebar-font-weight;
    height: 100%;
    position: relative;
    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;
          margin: 0;
          -webkit-font-smoothing: $body-font-smoothing;
        }
      }
    }

    #{$layout-sidebar-nav-selector} {
      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;
          display: inline-block;
          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;
          line-height: $layout-sidebar-nav-link-height;
          padding: 0 $layout-sidebar-nav-padding;
          text-decoration: none;
          white-space: nowrap;
          -webkit-font-smoothing: $header-font-smoothing;

          &, &: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%);
            }
          }
        }

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

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

    @if $layout-sidebar-include-footer {
      #{$layout-sidebar-footer-selector} {
        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;
        position: absolute;
        right: 0;
      }
    }

    &.collapsed {
      width: $layout-sidebar-nav-width-collapsed;

      #{$layout-sidebar-nav-selector} {
        #{$layout-sidebar-nav-list-selector} a {
          > i {
            margin-right: 0;
          }

          > span {
            display: none;
          }
        }
      }

      header {
        h1 {
          display: none;
        }

        .toggle-collapse {
          float: none;

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

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

@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;
      }
    }
  }
}

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