@import "../mixins/fontSize";
@import "../variables";
@import "../palette";

$logo-size: 50px;

.application-side-bar {
  @include font-size(13px);
  background-image: linear-gradient(to bottom, $light-blue-color 0px, $dark-blue-color 500px);
  width: $side-bar-width;
  min-height: 100vh;
  transition: all $global-transition-duration;
  position: fixed;
  top: 0;
  left: 0;
  z-index: $sidebar-z-index;
  &.relative {
    position: relative;
    min-height: 400px;
  }
  &__flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: inherit;
  }
  &__right-border {
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom, $panel-border-color 0px, $dark-blue-color 90%);
  }
  &--collapsed {
    width: $collapsed-side-bar-width;
    .application-side-bar__footer__flex {
      flex-direction: column;
    }
    .application-side-bar__logo {
      order: 3;
      
      &__image {
        padding: 0 10px;
        i {
          height: $logo-size / 2;
          background-position: center center;
        }
      }
    }
    .application-side-bar__collapser {
      i {
        height: $logo-size / 2;
        transform: rotate(180deg);
      }
    }
  }
  @media (max-width: $medium)  {
    width: $collapsed-side-bar-width;
    .application-side-bar__collapser {
      display: none;
    }
    .application-side-bar__logo {
      padding: 0 10px;
    }
  }
  &--show-user-menu {
    .application-side-bar__user > a {
      z-index: $sidebar-z-index;
    }
  }
  &__user {
    position: relative;
  }
  &__footer {
    padding: 10px 0 25px;
    transition: all $global-transition-duration;
    &__flex {
      display: flex;
      align-content: stretch;
      position: relative;
    }
  }
  &__logo {
    order: 1;
    flex: 1 0 auto;

    &__image {
      padding: 0 25px 0 20px;
      transition: all $global-transition-duration;
      > i {
        display: block;
        height: $logo-size;
        background: url("#{$path-images}/nuvi.svg") left center no-repeat;
        background-size: contain;
        transition: height $global-transition-duration;
        max-width: 76px;
      }
    }
  }
  &__collapser {
    transition: all $global-transition-duration;
    order: 2;
    border: none;
    cursor: pointer;
    outline: none;
    background: transparent;
    text-align: center;
    display: block;
    padding: 0 10px;
    > i {
      display: inline-block;
      background: transparent url("#{$path-images}/collapser-expanded.svg") center center no-repeat;
      min-width: $logo-size;
      height: $logo-size;
      transition: height $global-transition-duration;
    }
    &:hover {
      opacity: 0.75;
    }
  }
  &__company {
    position: relative;
    $logo-size: 35px;
    color: $brand-color;
    margin-bottom: 15px;
    cursor: pointer;
    outline: none;
    > a {
      outline: none;
      transition: all $global-transition-duration;
      overflow: hidden;
      &:hover {
        background: rgba(255,255,255,0.05);
      }
    }
    &__logo {
      height: $logo-size;
      width: $logo-size;
      img {
        border-radius: 3px;
        object-fit: contain;
        width: $logo-size;
        height: $logo-size;
        background: $dark-blue-color;
      }
    }
    &__name {
      line-height: $logo-size;
      margin-left: 15px;
      letter-spacing: 0.5px;
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    &__container {
      display: flex;
      padding: 20px;
      align-content: stretch;
      max-width: 100%;
    }
    &__arrow {
      line-height: $logo-size;
      padding-left: em-calc(5px);
      margin-right: em-calc(-15px);
    }
  }
  &__nav {
    flex: 1;
  }
  &__nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  &__nav-item {
    width: 100%;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    a {
      .navigation-icon {
        display: inline-block;
        margin-left: 9px;
        width: 30px;
      }
      span {
        margin-left: 20px;
        position: relative;
        top: -4px;
      }
      width: 100%;
      display: block;
      padding: 1em;
      color: $unselected-text;
      text-transform: uppercase;
      text-decoration: none;
      position: relative;
      transition: color $global-transition-duration;
      &:hover {
        color: $selected-text;
        svg path {
          fill: $selected-text;
        }
      }
      &.selected {
        svg path {
          fill: $pink-color;
        }
        background-image: radial-gradient(circle at left, rgba(9, 145, 221, .3), #071220 2.2em);
        background-repeat: no-repeat;
        color: $selected-text;
        font-weight: 500;
        /* TODO Current hack to get left margin to line
         * up when bold. May need to revisit when fonts
         * are on the up and up */

        span {
          margin-left: 15px;
        }
        border-left: 5px solid $brand-color;
        &:after,
        &:before {
          content: '';
          border-image: linear-gradient(to left, #054A76, #071220) 1;
          position: absolute;
          left: 0;
          right: 0;
        }
        &:before {
          border-top-width: 1px;
          border-top-style: solid;
          top: 0;
        }
        &:after {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          bottom: 0;
        }
      }
    }
  }
}