@import "./helper";

html,
.Page,
.Page-body,
.Page-sidebar,
.Page-content {
  height: 100%;
}

html.is-legacy .Page,
.Page.is-legacy {
  padding-top: $layout-header-height + 1px + 24px !important;
}

.Page {
  overflow: hidden;
  background-color: #eee;

  @include box-fixed-height(
    ".Page-header", $layout-header-height + 1px,
    ".Page-footer", 0,
    ".Page-body"
  );
}

.Page-header {
  position: relative;
  z-index: 99;
  padding: {
    right: 15px;
    left: 15px;
  }
  border-bottom: 1px solid $layout-header-border-color;
  background-color: $layout-header-bg-color;
  overflow: visible !important;
  @include pie-clearfix;
  @include box-shadow(0 1px 8px rgba(0, 0, 0, .3));
}

.Page-sidebar,
.Page-content {
  overflow: auto;
}

.Page-sidebar {
  width: $layout-sidebar-width;
  padding: {
    top: $layout-sidebar-top-padding;
    bottom: $layout-sidebar-bottom-padding;
  }
  float: left;
}

.Header-navs,
.Header-navs ul,
.Header-navs li,
.Header-brand,
.Header-brand a,
.Header-extra,
.Header-operations,
.Header-action {
  height: 100%;
}

.Header-navs {
  &,
  ul,
  li {
    float: left;
  }

  li {
    padding: 0 5px;
    @include text-middle("> a");
  }

  a {
    color: #fff;
  }
}

.Header-toggle,
.Header-brand,
.Header-operations,
.Header-action {
  float: left;
}

.Header-toggle {
  display: none;
  margin: {
    top: ($layout-header-height - 18px) / 2;
    right: 10px;
  }
  padding: 0;
  border-style: none;
  line-height: 1;
  font-size: 18px;
  color: $layout-action-trigger-color;
  background-color: transparent;
}

.Header-brand {
  margin-left: 5px;

  a {
    display: block;
    @include header-brand-logo;
  }

  + .Header-navs {
    margin-left: 50px;

    li.is-active a,
    a:hover {
      border-bottom-color: $layout-header-border-color;
    }

    a {
      height: 100%;
      padding: 0 20px;
      line-height: $layout-header-height;
      font-size: 16px;
      border-bottom: 2px solid transparent;
    }
  }
}

.Header-extra {
  float: right;

  .Header-navs {
    li.is-active a,
    a:hover {
      background-color: $layout-header-border-color;
    }

    a {
      $h: 30px;

      height: $h;
      padding: 0 15px;
      line-height: $h;
      border-radius: 3px;
    }
  }
}

.Header-operations {
  position: relative;
}

.Header-action {
  padding: 0 10px;
  @include text-middle(".Action-trigger");

  .Action-trigger {
    &.fa {
      width: 18px;
      font-size: 18px;
      color: $layout-action-trigger-color;
    }
  }

  button.Action-trigger {
    padding: 0;
    border-style: none;
    background-color: transparent;
  }

  &.Action--avatar {
    .Action-trigger {
      img,
      span {
        display: block;
        width: $layout-navbar-avatar-size;
        height: $layout-navbar-avatar-size;
        border-radius: 50%;
      }

      span {
        line-height: $layout-navbar-avatar-size;
        text-align: center;
        font: {
          size: 10px;
          weight: $font-weight-base;
        }
        background-color: #E0F2F1;
        @include ellipsis;
      }
    }
  }

  .Action-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 10px;
    min-width: 200px;
    margin-top: -2px;
    padding: 20px;
    border: 1px solid #ccc;
    border: {
      color: rgba(0, 0, 0, .2);
      radius: 2px;
    }
    background-color: #fff;
    @include box-shadow(0 2px 10px rgba(0, 0, 0, .2));

    .Card-content,
    .Card-footer {
      margin: {
        right: -20px;
        left: -20px;
      }
    }

    .Card-content {
      padding-top: 0;

      ul {
        list-style: none inside none;
        margin-bottom: 0;
        padding-left: 0;
      }
    }

    .Card-footer {
      padding-bottom: 0;
    }
  }

  &.is-active {
    &:after {
      position: absolute;
      top: 100%;
      content: $UN-space;
      width: 0;
      height: 0;
      margin: {
        top: -9px;
        left: 1px;
      }
      border: 8px solid transparent;
      border-top-width: 0;
      border-bottom-color: #fff;
    }

    &.Action--avatar:after {
      margin-left: 7px;
    }

    .Action-content {
      display: block;
    }
  }
}

.Sidebar .Navs > ul > li > a {
  display: block;
  color: #666;
  @include transition(background-color .3s);

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

.Sidebar-navs {
  font-size: 14px;

  > ul {
    > li {
      > a {
        @include sidebar-menu-primary;
      }

      > .Navs {
        display: none;

        a {
          font-weight: $font-weight-base;
          @include sidebar-menu-secondary;
        }
      }

      &.is-active {
        &.is-childless > a,
        > .Navs .is-active a {
          background-color: $layout-sidebar-item-hover;
        }

        > .Navs {
          display: block;
        }

        .Menu-switcher .fa {
          @include rotate(90deg);
        }
      }

      &.is-childless .Menu-switcher {
        display: none !important;
      }
    }

    &.Menu--grouped:first-child {
      padding-top: 10px;
    }
  }

  .Menu {
    &:not(.Menu--grouped) .Menu-label {
      display: none;
    }

    &.Menu--grouped {
      .Menu-label {
        @include sidebar-menu-label;
      }
    }

    + .Menu--grouped {
      padding-top: 5px;

      .Menu-label {
        margin-top: 5px;
      }
    }
  }

  .Menu-switcher {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -7px;
    line-height: 1;

    .fa {
      margin-right: 5px;
      @include transition(transform .3s ease);
    }
  }

  &.Navs--hover {
    overflow: visible;

    > ul > li {
      position: relative;

      > .Navs {
        position: absolute;
        top: -5px;
        left: 100%;
        padding-left: 10px;

        ul {
          position: relative;
          padding: 5px 1px;
          border-radius: 2px;
          background-color: #fff;
          @include box-shadow(1px 1px 10px 1px rgba(0, 0, 0, .3));

          &:before {
            content: $UN-space;
            position: absolute;
            top: 21px;
            right: 100%;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: #fff;
            border-left-width: 0;
          }
        }

        li {
          min-width: 120px;
          @include nowrap;

          a {
            padding: 0 25px;
          }
        }
      }

      &:hover > .Navs {
        display: block;
      }
    }
  }
}

.Content {
  padding: {
    top: $layout-content-top-padding;
    bottom: $layout-content-bottom-padding;
  }
}

.Content-header {
  margin-bottom: 20px;
  @include pie-clearfix;

  h1 {
    margin: 0;
    font-size: $layout-content-heading-font-size;
    text-shadow: 1px 1px rgba(255, 255, 255, .5);
  }

  .Breadcrumb {
    float: right;
    @include text-middle("ul");

    ul {
      margin-left: 8px;
      overflow: hidden;
    }

    li {
      float: left;
      font-size: 12px;

      + li:before {
        content: "/";
        margin: 0 5px;
      }
    }
  }
}

.Page {
  background-color: #eee !important;
}

.Page-header,
.Page-sidebar,
.Page-content .Content-header {
  * {
    font: {
      family: $font-family-sans-serif !important;
      size: $font-size-base;
      weight: 300 !important;
    }
  }

  .fa {
    font-family: FontAwesome !important;
  }
}

.Page-header,
.Page-sidebar {
  a {
    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }
  
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none inside none;
  }

  nav {
    background-color: transparent;
    @include box-shadow(none);
  }
}

.Page-header {
  nav {
    width: auto;
  }

  .Header-brand {
    a,
    span {
      font-size: $layout-brand-font-size;
    }
  }
}

.Page-body,
.Page-content {
  padding-left: 0;
}

.Page-sidebar {
  nav {
    line-height: inherit;

    &,
    i {
      height: auto;
    }

    li {
      float: none;
    }
  }

  .Sidebar-navs > ul > li > a > .fa + span {
    font-weight: normal !important;
  }

  .Menu-label * {
    font-size: 12px;
  }
}

.Page-content {
  .Content {
    padding: {
      right: 15px;
      left: 15px;
    }
  }

  .Content-header {
    color: #333;

    h1 {
      margin: 0 !important;
      font: {
        size: 24px !important;
        weight: $headings-font-weight !important;
      }
      line-height: $headings-line-height !important;
    }
  }
}

//= Responsive web design
@media screen and (max-width: $screen-sm-min) {
  .Page-sidebar {
    @include sidebar-in-mobile("> .Sidebar-navs");
  }

  .Header-toggle {
    display: block;
  }

  .Header-brand {
    @include header-brand-logo-in-mobile;
  }
}