@import '../typography/settings';
// @import "../settings/nav-side-admin";
@import '../settings/z-index';
@import '../tools/mixins/spacing-responsive';
/* ---------- SIDE NAV ADMIN---------- */

$sidenav-admin-width: 204px;
$sidenav-admin-toggle-width: 12px;
$sidenav-admin-max-width: $sidenav-admin-width + $sidenav-admin-toggle-width;
$sidenav-admin-footer-max-height: 210px;
$sidenav-admin-footer-min-height: 130px;
$sidenav-admin-icon-height: 38px;
$sidenav-admin-icon-width: 44px;
$sidenav-admin-header-base-height: 32px;
$sidenav-admin-header-image-height: 124px;
$sidenav-admin-header-icon-height: 12px;
$sidenav-admin-header-title-height: 32px;
$sidenav-admin-header-min-height: $sidenav-admin-header-base-height +
  $sidenav-admin-header-image-height;
$sidenav-admin-collapsed-width: 68px;
$sidenav-admin-collapsed-max-width: $sidenav-admin-collapsed-width +
  $sidenav-admin-toggle-width;
$sidenav-admin-collapsed-header-min-height: $sidenav-admin-header-base-height +
  $sidenav-admin-icon-height;
$sidenav-background-color: #333333;

.sidenav-app-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
}

.sidenav-admin-container {
  display: flex;
  overflow: hidden;
}

.sidenav-admin-wrapper {
  position: relative;
  z-index: $zindex-top-bar-fixed - 10;
  display: flex;
  height: 100%;
  background-color: $sidenav-background-color;
}

.sidenav-page-wrapper {
  width: 100%;
  overflow-y: auto;
}

.sidenav-page-content-wrapper {
  display: flex;
  flex: 1 1 auto;
  overflow-y: auto;
}

.sidenav-admin {
  display: flex;
  width: $sidenav-admin-width;
  margin: 0;
  background-color: $sidenav-background-color;
  border-top: darken($sidenav-background-color, 10%) 1px solid;
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex-direction: column;
  align-items: center;

  .collapse-text.ng-enter {
    opacity: 0;
    transition: opacity 0.3s linear;
  }

  .collapse-text.ng-enter.ng-enter-active,
  .collpase-text.ng-leave {
    opacity: 1;
  }

  .collapse-text.ng-leave.ng-leave-active {
    opacity: 0;
  }

  > ul {
    flex: 1 1 auto;
  }

  ul {
    display: flex;
    min-height: 60px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    @include vr-spacing(pl, 1);
    @include vr-spacing(pr, 0.5);
    @include vr-spacing(pv, 0.5);

    li {
      width: 100%;

      @include vr-spacing(pb, 1);

      @media (max-height: 900px) {
        @include vr-spacing(pb, 0.75);
      }

      @media (max-height: 768px) {
        @include vr-spacing(pb, 0.5);
      }
    }

    li:last-child {
      @include vr-spacing(pb, 0);
    }
  }

  .title {
    display: inline-block;
    max-height: $sidenav-admin-icon-height;
    margin: 0;
    overflow: hidden;
    font-family: $brand-font-light;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;

    @include vr-spacing(pl, 0.75);
  }

  a {
    display: flex;
    min-width: 0;
    color: $cui-gray-10;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
    align-items: center;

    > .icon {
      display: flex;
      width: $sidenav-admin-icon-width;
      height: $sidenav-admin-icon-height;
      font-size: 28px;
      line-height: 1.25;
      color: $cui-gray-10;
      background-color: transparent;
      align-content: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    > .icon-outline {
      -webkit-text-fill-color: $sidenav-background-color;
      -webkit-text-stroke: 1px $cui-gray-10;
    }

    .icon-diagnostics-active {
      height: 28px;
      font-size: 18px;

      @include vr-spacing(mt, 0.5);
      @include vr-spacing(mb, 0.25);
    }

    .icon-cloud-active {
      height: 36px;
      font-size: 26px;
    }

    &:hover,
    &:focus {
      color: $cui-theme-50;
      text-decoration: none;
      cursor: pointer;
      box-shadow: none;

      > .icon {
        color: $cui-theme-50;
        text-shadow: none;
      }

      > .icon-outline {
        -webkit-text-fill-color: $cui-theme-50;
        -webkit-text-stroke: 1px $cui-theme-50;
      }
    }
  }

  .active {
    a {
      color: $cui-theme-50;

      &:hover,
      &:focus {
        > .icon {
          color: $cui-theme-50;
        }
      }

      > .icon {
        color: $cui-theme-50;
      }

      > .icon-outline {
        -webkit-text-fill-color: $cui-theme-50;
        -webkit-text-stroke: 1px $cui-theme-50;
      }
    }
  }

  button {
    &:hover,
    &:focus {
      box-shadow: none;
    }
  }

  select {
    @include vr-spacing(pv, 0.35);

    margin-bottom: 0;
  }
}

.sidenav-admin--header {
  display: flex;
  flex-direction: column;

  @include vr-spacing(pl, 1);
  @include vr-spacing(pr, 0.5);

  padding-top: 30px;

  @include vr-spacing(pb, 3.5);

  @media (max-height: 900px) {
    @include vr-spacing(pt, 1);
    @include vr-spacing(pb, 1.5);
  }

  @media (max-height: 768px) {
    @include vr-spacing(pt, 0.5);
    @include vr-spacing(pb, 1);
  }

  &.image-icon-adjustment {
    min-height: $sidenav-admin-header-min-height +
      $sidenav-admin-header-icon-height;
  }

  &.image-icon-title-adjustment {
    min-height: $sidenav-admin-header-min-height +
      $sidenav-admin-header-icon-height + $sidenav-admin-header-title-height;
  }

  .header-title {
    height: $sidenav-admin-header-title-height;

    @include vr-spacing(mv, 0.5);
  }

  .header-icon {
    font-size: $sidenav-admin-header-icon-height;
    color: $cui-gray-40;
    text-align: center;
    transition: all 0.3s linear;

    @include vr-spacing(mv, 0.5);
  }

  .icon-cisco-logo {
    font-size: 35px;
    line-height: 27px;
  }

  .image-logo {
    width: 100%;
    opacity: 1;
    transition: opacity 0.3s linear;
  }

  .image-logo-collapsed {
    height: 0;
    opacity: 0;
  }
}

.sidenav-admin--footer {
  display: flex;
  width: inherit;
  max-width: $sidenav-admin-max-width;
  min-height: $sidenav-admin-footer-min-height;
  padding: 0;
  flex-direction: column;

  .partner-title {
    z-index: 1;
    display: flex;
    width: calc(100% + #{$sidenav-admin-toggle-width});
    min-height: 24px;
    color: $cui-gray-10;
    cursor: default;
    background-color: $cui-gray-70;
    border-right: 16px solid transparent;
    align-items: center;
    justify-content: center;

    .title {
      max-width: $sidenav-admin-max-width;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
    }
  }

  .admin-pages {
    @include vr-spacing(pv, 0.75);

    .title {
      max-height: none;
      font-size: 14px;
    }
  }

  .footer-divider,
  .footer-divider-top,
  .footer-divider-dark {
    z-index: 1;
    display: flex;
    width: 100%;
    overflow: hidden;
    border-top: $cui-gray-70 1px solid;
  }

  .footer-divider-top {
    width: calc(100% + #{$sidenav-admin-toggle-width});
  }

  .footer-divider-dark {
    border-top: $cui-gray-90 1px solid;
  }

  .user-info.dropdown.open {
    transform: translateY(-#{$sidenav-admin-footer-max-height});
    transition: all 0.3s linear;
  }

  .user-info {
    display: flex;
    width: calc(100% + #{$sidenav-admin-toggle-width});
    background-color: $sidenav-background-color;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    flex-direction: column;

    .btn--user {
      display: flex;
      width: inherit;
      height: 68px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 20px;
      cursor: pointer;
      background: 0 0;
      border: none;
      border-radius: 0;
      align-items: center;

      ul {
        justify-content: center;
      }

      li {
        width: 128px;
        overflow: hidden;
        line-height: 1;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        list-style: none;
      }

      .user-name {
        padding-bottom: 0.5rem;
        padding-left: 0.25rem;
        font-size: 14px;
        color: $cui-gray-30;
      }

      .org-name {
        padding-left: 0.25rem;
        margin-top: 3px;
        font-size: 12px;
        color: $cui-gray-40;
      }

      &:hover,
      &:focus {
        .user-name {
          color: $cui-theme-50;
        }

        .org-name {
          color: $cui-theme-20;
        }
      }
    }

    .user-img {
      display: inline-block;
      width: 35px;
      height: 35px;
      overflow: hidden;
      text-align: center;
      vertical-align: middle;
      background-color: $cui-gray-40;
      background-image: none;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 50%;
      flex: 0 0 auto;

      @include vr-spacing(mv, 1);

      .icon {
        bottom: -5px;
        font-size: 30px;
        line-height: 35px;
        color: $cui-white-100;

        &:hover,
        &:focus {
          background-color: $cui-theme-50;
        }
      }

      &:hover,
      &:focus {
        background-color: $cui-theme-50;
      }
    }

    .user-info-text {
      color: $cui-white-100;
    }

    .dropdown-menu.visible {
      top: 100%;
      height: 130px;
      padding-bottom: calc(100% - 2px);
    }

    .dropdown-menu {
      top: auto;
      left: 0;
      width: 100%;
      height: 0;
      padding-bottom: 0;
      margin-top: 0;
      overflow: visible;
      font-family: $brand-font-light;
      font-size: 13px;
      font-size: 16px;
      line-height: 1.5;
      color: $cui-white-100;
      background-color: $sidenav-background-color;
      border: none;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);

      & > li:first-child > a,
      & > li:last-child > a,
      & > li:first-child > span,
      & > li:last-child > span {
        border-radius: 0;
      }

      li {
        display: flex;
        padding: 0;
        overflow: hidden;
        background-color: $sidenav-background-color;

        a,
        span {
          color: $cui-gray-20;
          text-align: left;
          background-color: $sidenav-background-color;
        }

        &:hover,
        &:focus {
          color: $cui-theme-50;
          text-decoration: none;
          background-color: $sidenav-background-color;

          a {
            color: $cui-theme-50;
            text-decoration: none;
            background-color: $sidenav-background-color;
          }
        }
      }
    }
  }
}

.sidenav-admin--collapsed {
  width: $sidenav-admin-collapsed-width;

  .sidenav-admin--header {
    min-height: $sidenav-admin-collapsed-header-min-height;

    &.image-icon-adjustment,
    &.image-icon-title-adjustment {
      min-height: $sidenav-admin-collapsed-header-min-height +
        $sidenav-admin-header-icon-height;
    }

    .header-icon {
      @include vr-spacing(mv, 0);

      transition: all 0.3s linear;
    }

    .icon-cisco-logo {
      font-size: 24px;
      line-height: 20px;
    }

    .image-logo {
      height: 0;
      opacity: 0;
      transition: height 0.3s linear;
    }

    .image-logo-collapsed {
      width: $sidenav-admin-icon-width;
      height: $sidenav-admin-icon-height;
      opacity: 1;
      transition: opacity 0.3s linear 0.2s;

      @include vr-spacing(mv, 0.25);
    }
  }

  .sidenav-admin--footer {
    max-width: $sidenav-admin-collapsed-max-width;
  }
}

.sidenav-admin-toggle {
  display: flex;
  width: $sidenav-admin-toggle-width;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  text-decoration: none;
  box-shadow: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .toggle-icon {
    padding: 0;
    margin: 0;
    font-size: 24px;
    color: $cui-gray-50;
    text-decoration: none;
    background-color: transparent;
    transform: rotate(90deg);
    box-shadow: none;
  }

  &:hover {
    z-index: 11;
    cursor: w-resize;
    background-color: rgba($cui-gray-70, 0.5);

    .toggle-icon {
      color: $cui-theme-50;
      cursor: w-resize;
    }
  }

  &--collapsed {
    &:hover {
      cursor: e-resize;

      .toggle-icon {
        cursor: e-resize;
      }
    }
  }
}

.selected {
  a {
    background-color: transparent;
    box-shadow: none;

    .title {
      color: $cui-theme-50;
    }

    > .icon {
      color: $cui-theme-50;
    }

    > .icon-outline {
      -webkit-text-fill-color: $cui-theme-50;
      -webkit-text-stroke: 1px $cui-theme-50;
    }
  }
}

/* ---------- SIDE NAV ADMIN---------- */