/**
 *  Modus Framework Layout
 *
 *  Application layout specific styles that are compiled seprately.
 *
 *  Layout specific variables are contained within this file.
 */

// Variables
$page-header-height:      56px !default;
$page-footer-height:      24px !default;
$sidebar-width:           60px !default;
$open-sidebar-width:      300px !default;
$panel-header-height:     48px !default;
$app-toolbar-height:      48px !default;

$body-bg:                 ui-color('main-background');
$page-header-background:  ui-color('main-background');
$page-footer-background:  ui-color('main-background');
$left-nav-background:     ui-color('main-background');
$layout-border-color:   #cbcdd6;

html,
body {
  width: 100%;
  height: 100%;
}

.no-select {
  -webkit-touch-callout: none;
  user-select: none;
}

.modus-layout {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.modus-header {
  height: $page-header-height;
  z-index: 999;
  border-bottom: 1px solid $layout-border-color;

  @include drop-shadow(0, 2px, 0.1);
  @extend .no-select;

  .menu-btn {
    font-size: 2rem;
    padding-right: 16px;
    cursor: pointer;
  }
}

.modus-body {
  display: flex;
  flex: 2;
  overflow-y: auto;

  .modus-sidebar {
    flex: 0 0 $sidebar-width;
    order: -1;
    width: $sidebar-width;
    z-index: 998;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    border-right: 1px solid $layout-border-color;
    background-color: $left-nav-background;

    @include bounce(flex-basis, 0.2s);
    @include drop-shadow(1px, 0, 0.1);
    @extend .no-select;

    .nav-link {
      display: flex;
      height: 3rem;
      padding: 0 10px 0 0;
      align-items: center;
      color: $col_gray_9;
      font-size: 16px;

      &:hover {
        background-color: ui-color('hover');
      }

      &.active {
        background-color: ui-color('active');
        color: #fff;
      }

      &.disabled {
        opacity: $disabled-opacity;
      }

      .left-nav-icon {
        display: inline-block;
        height: 1.5rem;
        padding: 0 18px;
        justify-self: center;

        #{$icon-font-classes} {
          font-size: 1.5rem;
          line-height: 1;
        }

        img {
          max-width: 100%;
          height: 24px;
        }
      }
    }

  }

}

.modus-footer {
  flex-wrap: wrap;
  z-index: 9999;
  height: $page-footer-height;
  padding: 2px 10px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid $layout-border-color;
}

// generic layout elements
.modus-content-rows {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  position: relative;
  }

.modus-content-columns {
  display: flex;
  flex-direction: row;
  flex: 1 1 100%;
  position: relative;
  min-height: 0; // Fixes unintended flex-shrink behavior in Firefox
  }

.modus-content {
  flex: 1 1 100%;
  max-height: 100%;
  position: relative;
  overflow-y: auto;
  background-color: ui-color('panel-background');
}

.modus-toolbar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  min-height: $app-toolbar-height;
  max-height: calc(#{$app-toolbar-height} * 2);
  border-bottom: 1px solid $layout-border-color;
  padding: 0 16px; // position or margin causes overflow
}

.sidebar-open {
  & > .modus-sidebar {
    ul {
      padding: 0;

      li {
        list-style: none;

        .collapsed {
          .expand-icon {
            transform: rotate(180deg);
          }
        }
      }

      .sub-nav {
        .nav-link {
          border: none;
          padding-left: 3rem;
        }
      }

    }
  }
}

.sidebar-closed {
  & > .modus-sidebar {
    flex: 0 0 60px;

    ul {
      padding: 0;

      li {
        list-style: none;

        .sub-nav {
          display: none;
        }

        &.has-subnav:hover {
          .sub-nav {
            display: block;
            position: absolute;
            left: 60px;
            margin-top: -48px;

            .nav-link {
              padding-right: 1rem;
            }
          }
        }
      }
    }
  }
}

.modus-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-height: 100%;

  &.panel-sm {
    min-width: 256px;
    max-width: 256px;
  }

  &.panel-md {
    min-width: 352px;
    max-width: 352px;
  }

  &.panel-lg {
    min-width: 448px;
    max-width: 448px;
  }

  &.panel-xl {
    min-width: 544px;
    max-width: 544px;
  }

  position: relative;
  z-index: 500;
  background-color: ui-color('panel-background');

  .panel-header {
    display: flex;
    flex: 0 0 $panel-header-height;
    z-index: 600;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: ui-color('main-background');
    border-bottom: 1px solid $col_gray_1;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      text-align: center;
      margin: 0 !important;
    }
  }

  .panel-body {
    display: flex;
    overflow: hidden;
    flex-direction: column;

    .static-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid $col_gray_1;
    }

    .scroll-container {
      overflow-y: auto;
      height: 100%;
    }
  }

  .panel-footer {
    padding: 0 8px;
  }
}

.right-items {
  position: absolute;
  right: 0;
}

.left-items {
  position: absolute;
  left: 0;
}

// Responsiveness

@media (min-width: 1050px) {
  .sidebar-open {
    & > .modus-sidebar {
      flex: 0 0 $open-sidebar-width;
    }
  }
}

@media (max-width: 1050px) {
  .sidebar-open {
    & > .modus-sidebar {
      position: absolute;
      height: calc(100% - #{$page-header-height});
      width: 300px;
    }

    .modus-main-content {
      margin-left:60px;
    }
  }
}