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

 @import "sn-layout_variables";

// DRAWER COLLAPSED

%drawer-collapsed {
  @media screen and (min-width: $layout-responsive-breakpoint) {
    @include flexitem(0, 1, $layout-drawer-collapsed-width);
    width: $layout-drawer-collapsed-width;
    z-index: 90000;

    .sn-drawer {
      .sn-brand {
        img {
          display: none;
        }
        .sn-brand__img__collapsed {
          display: block;
        }
      }
      .sn-nav {
        .sn-nav__list {
          margin: 20px 0;
          max-height: calc(100vh - 50%);
          overflow-y: auto;
          overflow-x: hidden;
        }
        .sn-nav__list__item--expandable {
          padding: 6px 4px;
        }
      }
    }
    .sn-drawer__label {
      font-size: 0;
      flex: 0;
      &:before {
        margin-right: 0;
        height: 0;
      }
      &:after {
        margin-left: 0;
        height: 0;
      }
      padding: 0;
    }
    .sn-drawer__footer {
      .sn-nav {
        &:first-child {
          padding-top: 4px;
        }
        .sn-nav__list {
          margin: 12px 0;
          > .sn-nav__list__item {
            ul {
              bottom: 12px;
            }
          }
        }
      }
    }
    hr {
      margin: 0 8px;
      padding: 0;
    }
  }
}

%nav-dark-theme {
  .sn-drawer-button {
    display: none !important;
    visibility: hidden;
  }
}

// NAV LIGHT THEME

%nav-light-theme {
  a {
    color: $nav-list-text-color;
    flex-wrap: nowrap;
  }
  .sn-drawer__label, hr {
    border-right: 1px solid $nav-list-label-color;
  }
  .sn-nav__list {
    .sn-nav__list__item {
      color: $nav-list-text-color;
      ul {
        background-color: white;
        .sn-nav__list__item {
          &:hover {
            background-color: $nav-list-hover-background-color;
          }
        }
        a {
          color: $nav-list-text-color;
        }
      }
      ul {
        .sn-nav__list__item__icon {
          color: $nav-list-icon-color;
        }
        .sn-nav__list__item__text {
          color: $nav-list-text-color;
        }
      }
      &.is-selected {
        background-color: $nav-list-hover-background-color;
      }
      &:hover {
        background-color: lighten($nav-list-hover-background-color, 35%);
      }
    }
    .sn-nav__list__item--expandable {
      &:before {
        content: "";
        top: 12px;
        left: 32px;
        position: relative;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 4px 0 4px;
        border-color: #9e9e9e transparent transparent transparent;
      }
      &:hover {
        background-color: lighten($nav-list-hover-background-color, 35%);
      }
      &.is-expanded {
        &:hover, &:active {
          background-color: $nav-list-hover-background-color !important;
        }
      }
    }
    .sn-nav__list__info {
      color: $nav-list-info-color;
    }
    .sn-nav__list__label {
      color: $nav-list-label-color;
    }
  }
}

// NAV COLLAPSED

// Inside Sysbar
%nav-collapsed--sysbar {
  .sn-nav {
    &__list {
      &__item {
        &__text {
          display: none;
        }
        ul {
          .sn-nav__list__item {
            .sn-nav__list__item__text {
              display: block;
            }
          }
        }
      }
    }
  }
}

// Inside Drawer
%nav-collapsed--drawer {
  @media screen and (min-width: $layout-responsive-breakpoint) {
    .sn-nav {
      &__list {
        &__item {
          ul {
            display: none;
            position: absolute;
            left: 52px;
            min-width: 192px;
            border-radius: 2px;
            background-color: white;
            box-shadow: 4px 4px 8px rgba(0,0,0,.3);
            flex-wrap: nowrap;
            .sn-nav__list__item {
              &:hover {
                background-color: $nav-list-hover-background-color;
              }
            }
            a {
              color: $nav-list-text-color;
            }
          }
          &__text {
            display: none;
          }
          &:hover {
            ul {
              display: block;
            }
          }
          ul {
            .sn-nav__list__item__icon {
              color: $nav-list-icon-color;
            }
            .sn-nav__list__item__text {
              color: $nav-list-text-color;
            }
          }
        }
        &__item--expandable {
          &:before {
            content: "";
            top: 12px;
            left: 32px;
            position: relative;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 4px 0 4px 4px;
            border-color: transparent transparent transparent #9e9e9e;
          }
          &.is-expanded {
            &:before {
              border-width: 4px 0px 4px 4px;
              border-color: transparent transparent transparent rgb(158, 158, 158);
            }
          }
          cursor: default;
          > a {
            cursor: default;
          }
          &:after {
            right: 4px;
          }
          > ul {
            .sn-nav__list__item__text {
              display: block;
            }
          }
        }
        &__info {
          color: $nav-list-info-color;
        }
        &__label {
          display: block;
          padding: 8px 16px;
          font-size: 12px;
          line-height: 14px;
          text-transform: uppercase;
          color: $nav-list-label-color;
          cursor: default !important;
        }
      }
    }
  }
}