@import "../settings/colors";
@import "../settings/fonts";

@import "../tools/mixins/spacing-responsive";
@import "../tools/mixins/vendor-prefixes";

@import "node_modules/@collabui/icons/scss/mixins";

$top-nav-font-size-desktop: rem-calc(12);
$top-nav-font-size-mobile: rem-calc(14);
$top-nav-height: rem-calc(32);
.top-nav {
  height: rem-calc(48);
  background-color: $white;
  display: flex;
  align-items: center;
  @media #{$medium-up} {
    height: $top-nav-height;
  }
  &--icon {
    @extend .icon;
    @extend .icon-hamburger-menu;
    color: $gray-1;
    font-size: rem-calc(32);
    @media #{$medium-up} {
      display: none;
    }
  }
  &--logo {
    max-height: rem-calc(185px);
    opacity: .35;
    .icon {
      color: $gray-1;
      font-size: 1.5rem;
      @include vr-spacing(pl, 3);
    }
    img {
      margin-left: -120px;
    }
    @media #{$medium-up} {
      display: none;
    }
  }
  &--mobile {
    display: flex;
    align-items: center;
    @media #{$medium-up} {
      display: none;
    }
    .activation {
      @include vr-spacing(pr, .75);
      [cs-dropdown] .dropdown-menu:not(.sub-menu) {
        transform: translateX(-100%);
        margin-left: 100%;
      }
    }

    .icon {
      font-size: 1.5rem;
      color: $gray-4
    }

    .icon-three-dots {
      top: 3px;
    }

    .top-nav--current {
      color: $blue-base;
      text-transform: uppercase;
      font-size: 14px;
    }
  }
  &--list {
    ul {
      margin: 0;
    }
    @media #{$small-only} {
      display: flex;
      flex-direction: column;
      opacity: 0;
      min-height: 100vh;
      width: 80vw;
      background-color: $white;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      @include vr-spacing(pt, 7.5);
      @include vr-spacing(pb, 2);
      margin-left: 0;
      @include box-shadow(0px 1px 2px 1px rgba(52, 53, 55, 0.18));
      animation-name: slideLeft;
      animation-duration: 250ms;
      animation-timing-function: ease-in-out;
      transform: translateX(-150%);
      transition: opacity 1s ease-in-out;
      .open-nav & {
        opacity: 1;
        transform: translateX(0);
        transition: none;
      }
      > ul {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .sign-out {
        display: flex;
        align-items: flex-end;
        flex: 1;
        span {
          font-size: $top-nav-font-size-mobile;
        }
      }
    }
    li {
      font-size: $top-nav-font-size-mobile;
      line-height: rem-calc(24);
      list-style: none;
      color: $gray-1;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      @include vr-spacing(ml, 1);
      @include vr-spacing(mb, .5);
      &.active a {
        text-decoration: none;
        color: $blue-base;
        outline: none;
        box-shadow: none;
      }
      &.active a {
        cursor: default;
      }

      a {
        color: $gray-1;
        @include vr-spacing(pv, .5);
        @include vr-spacing(ph, 2);
        flex-grow: 1;
        font-family: $brand-font-regular;
        &:hover,
        &:focus,
        &:active,
        &.active,
        &.router-link-active {
          text-decoration: none;
          color: $blue-base;
          outline: none;
          box-shadow: none;
        }
        &.active,
        &.router-link-active {
          cursor: default;
        }
      }
      &:first-child {
        a {
          @media #{$medium-up} {
            padding-left: 0;
          }
        }
      }
      &.current,
      &:hover {
        // background-color: $mint-press;
        color: $blue-base;
      }
      @media #{$medium-up} {
        display: flex;
        font-size: $top-nav-font-size-desktop;
        line-height: rem-calc(16);
        padding: 0;
        @include vr-spacing(mr, .75);
        @include vr-spacing(mb, 0);
        margin-left: 0;
        float: left;
        cursor: pointer;
        &.sign-out {
          display: flex;
          align-items: center;
          float: right;
          margin-right: 0;
          a {
            display: flex;
            align-items: center;
            padding-right: 0;
          }
          .icon {
            @include vr-spacing(mr, .75);
            margin-bottom: 1px;
          }
          span {
            font-size: $top-nav-font-size-desktop;
          }
        }
        a {
          @include vr-spacing(ph, .75);
          padding-top: 9px;
          padding-bottom: 7px;
        }
      }
      @media #{$small-only} {
        &.sign-out .icon {
          display: none;
        }
      }
    }
  }
  .mobile-nav-mask {
    top: 0;
    left: 0;
    display: none;
    height: 100vh;
    width: 100vw;
    position: fixed;
    opacity: 0;
    z-index: 9998;
  }
  &.open-nav .mobile-nav-mask {
    display: block;
  }
}

/*
==============================================
slideRight
==============================================
*/

.open-nav .top-nav--list {
  animation-name: slideRight;
  animation-duration: 250ms;
  animation-timing-function: ease-in-out;
}

@keyframes slideRight {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(-2rem);
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(-2rem);
  }
  100% {
    transform: translateX(-150%);
  }
}