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

 @import "sn-layout_variables";

// Padding if nav is the first-child
.sn-layout__drawer .sn-nav:first-child {
  padding: 8px 0;
}

.sn-drawer__footer .sn-nav__list__item {
  padding: 6px 0px;
}

// Nav
.sn-nav {
  @include flexitem(4, 1, auto);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;

  &__list {
    position: static;
    @include flexbox();
    @include flexdirection(column);
    margin: 14px 0;
    padding: 0;
    list-style: none;
    line-height: 20px;
    color: white;

    & #{&} {
      margin: 0!important;
    }
    &__label {
      display: none;
    }

    &__item {
      @include flexitem(1, 1, auto);
      @include flexbox();
      @include flexdirection(row);
      flex-wrap: wrap;
      margin: 2px 0;
      padding: 6px 16px;
      border-radius: 2px;
      color: white;
      a {
        color: white;
      }

      transition: all;
      transition-duration: 0.2s;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

      &:hover, &:active {
        background-color: darken($layout-drawer-background-color, 4%);
        cursor: pointer;
      }

      &.is-selected {
        background-color: darken($layout-drawer-background-color, 6%);
      }

      &__icon {
        flex: 0 1 24px;
        padding: 4px 2px 0px 2px;
        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      &__text {
        flex: 1 1 calc(100% - 48px);
        padding: 6px;
        word-wrap: break-word;
      }
      &__link {
        flex: 1 1 calc(100% - 48px);
        word-wrap: break-word;
      }
      &#{&}--expandable {
        &:before {
          content: "";
          top: 12px;
          left: 94%;
          position: relative;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 4px 4px 0 4px;
          border-color: #9e9e9e transparent transparent transparent;
        }
        ul {
          display: none;
          @include flexitem(1,1,100%);
        }
        &__text {
          flex: 1 1 calc(100% - 48px);
          padding: 6px 8px;
        }
        &.is-expanded {
          &:before {
            border-width: 0 4px 4px 4px;
            border-color: transparent transparent #9e9e9e transparent;
          }
          ul {
            display: block;
            padding: 0;
          }
          &:hover {
            background-color: transparent;
          }
        }
      }
    }

    &__info {
      @include flexitem(1, 1, auto);
      @include flexbox();
      @include flexdirection(row);
      list-style: none;
      word-break: break-all;
      padding: 4px 4px 4px 16px;
      font-size: 12px;
      line-height: 14px;
      cursor: default;
    }

    a {
      @include flexitem(1, 1, auto);
      @include flexbox();
      @include flexdirection(row);
      padding: 0;
      margin: 0;
      text-decoration: none;
    }
  }

} // Drawer Nav


// Nav inside Sysbar & Header

.sn-sysbar,
.sn-header {

  // DEFAULT THEME (LIGHT)
  .sn-nav {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px;
    &__list {
      @include flexdirection(row);
      max-height: calc(60vh);
      overflow-y: auto;
      margin: 0;
      &:last-child {
        ul {
          right: 8px;
        }
      }
      &__item {
        margin: 2px 2px;
        white-space: nowrap;
        flex-wrap: nowrap;
        flex: 1 1 100%;

        &__item__text {
          white-space: nowrap;
        }
        ul {
          margin: 2px 8px;
          background-color: white;
          .sn-nav__list__item {
            flex: 1 1 100%;
            &:hover {
              background-color: $nav-list-hover-background-color;
            }
            .sn-nav__list__item__link {
              flex-wrap: nowrap;
            }
          }
          a {
            flex: 1 1 100%;
            color: $nav-list-text-color;
            flex-wrap: nowrap;
          }
          .sn-nav__list__item__icon {
            color: $nav-list-icon-color;
          }
          .sn-nav__list__item__text {
            flex: 1 1 100%;
            white-space: nowrap;
            color: $nav-list-text-color;
          }
        }
      }
      &__item--expandable {
        &:before {
          display: none;
        }
        &:after {
          content: "";
          top: 14px;
          right: 0;
          position: relative;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 4px 4px 0 4px;
          border-color: #9e9e9e transparent transparent transparent;
        }
        ul {
          position: absolute;
          left: auto !important;
          top: 46px;
          margin: 0;
          padding: 4px;
          box-shadow: 4px 4px 8px rgba(0,0,0,.3);
          flex-wrap: nowrap;
        }
        &.is-expanded {
          &:after {
            border-width: 0 4px 4px 4px;
            border-color: transparent transparent #9e9e9e transparent;
          }
          ul {
            padding: 0px !important;

            li {
              margin: 0px !important;
            }
          }
        }
      }
      &__info {
        word-break: normal;
        color: $nav-list-info-color;
      }
      &__label {
        display: block;
        padding: 8px 16px;
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
        cursor: default !important;
        color: $nav-list-label-color;
      }
    }
    &.is-collapsed {
      @extend %nav-collapsed--sysbar;
    }
  }

  // LIGHT THEME
  .sn-nav {
    &.sn-nav--light-theme {
      @extend %nav-light-theme;
    }
  }

}

// Nav inside Sysbar
.sn-sysbar {
  .sn-nav {
    &__list {
      &__item--expandable {
        ul {
          top: calc(#{$layout-sysbar-height} - 50% + (#{$nav-list-item-max-height} / 2) );
        }
      }
    }
  }
}

// Nav inside Header
.sn-header {
  .sn-nav {
    &__list {
      &__item--expandable {
        z-index: 2;
        background-position: 96% 20px !important;
        ul {
          // right: 16px;
          top: calc(#{$layout-header-height} - 50% + (#{$nav-list-item-max-height} / 2) );
        }
      }
    }
  }
}

// Nav inside footer
.sn-drawer__footer {
  .sn-nav {
    &:first-child {
      padding-top: 12px;
    }
    .sn-nav__list {
      margin: 0;
      > .sn-drawer__nav__list__item {
        margin: 0;
      }
    }
  }
}