@import './core/mixins.scss';
@import './colors/base.scss';

$side-nav-size: 220px;
$side-nav-collapsed-size: 64px;

.side-nav {
  z-index: 1039;
  position: fixed;
  height: 100%;
  background-color: #fff;
  width: $side-nav-size;
  @include transition(0.2s all);
  padding: 0 8px;
  border-right: 1px solid $gray-20;
  .nav-header {
    padding: 8px 25px;
    text-align: center;
    background-size: cover;
    border-bottom: 2px solid $gray-05;
    .arrow {
      top: 23px;
      right: 10px;
      color: $gray-20;
      position: absolute;
      cursor: pointer;
      font-size: 16px;
    }
    .profile-element {
      @include transition(0.4s all);
      img {
        height: 48px;
      }
    }
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
    	background: linear-gradient(353.31deg, $secondary-color 0%, $danger 100%);
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
    }
  }
  a, p, span {
    color: $gray-80;
    text-decoration: none;
  }
  ul {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin-top: 16px;
    li {
      a {
        width: 100%;
        padding: 8px 16px;
        display: inline-block;
        position: relative;
        @include transition(0.2s all);
        z-index: 9999999;
        border-radius: 6px;
        &:hover {
        	background-color: #ff88001a;
          color: $secondary-color;
          span {
            color: $secondary-color;
          }
        }
        span, i {
          width: 16px;
          margin-right: 16px;
        }
        span {
          @include transition(0.3s all);
        }
        .tooltip-trigger {
          display: inline-block !important;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2002;
        }
      }
    }
  }
  &.collapsed {
    .nav-header {
      padding: 8px 0px;
      .arrow {
        right: 2px;
      }
    }
    width: $side-nav-collapsed-size;
    .profile-element {
      overflow: hidden;
      width: 46px;
      .text {
        display: none;
      }
    }
    ul {
      li {
        a {
          text-align: center;
          padding: 15px 15px;
        }
        .span, i {
          margin-right: 0;
        }
        .hide-on-collapse {
          display: none;
        }
      }
    }
  }
}

.home {
  .collapsed {
    .nav-header {
      padding-bottom: 6px;
    }
  }
}
.tooltip {
  background: transparent;
  &.right {
    .tooltip-arrow {
      border-right-color: $secondary-color;
      border-top-color: transparent !important;
    }
  }
  &.bottom {
    margin-top: -15px;
    .tooltip-arrow {
      border-bottom-color: darken($primary-color, 20%);
    }
  }
  .tooltip-inner {
    max-width: inherit;
    min-width: 75px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    color: #fff;
    font-weight: 300;
    font-size: 14px;
  }
}

.company-highlight {
  background: rgba(255, 255, 255, .0);
  box-shadow: none;
  border: 0;
}

.widget-section {
  margin-top: 20px;
}

.tour-active {
  z-index: 9999999 !important;
}

@media screen and (max-width: 768px) {
  #page-wrapper {
    margin: 0;
    width: 100%;
    padding: 80px 10px 0 !important;
    &.menu-collapsed {
      margin-left: 0;
    }
    &.home {
      h1 {
        font-size: 20px;
      }
    }
  }
  nav.side-nav {
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
  	background: linear-gradient(315deg, #FF4E11 0%, #ff8800 100%);
    &.collapsed {
      width: 100%;
      .side-nav-ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: -2px;
        overflow: hidden;
        align-items: center;
        height: 100%;
        li {
          a {
            padding: 0px 20px;
            width: initial;
            color: #fff;
            &:hover {
              background-color: transparent;
            }
            .tooltip.in {
              opacity: 0;
            }
          }
        }
      }
    }
    .nav-header {
      display: none;
    }

  }
}