@use 'vars';

@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;

.navi {
  height: vars.$navi-height;
  display: flex;
  position: relative;
  z-index: vars.$navi-index;

  &.active {
    @media ( max-width: vars.$mobile-width ) {
      z-index: vars.$navi-index + 1;
    }
  }

  // Menu / X icons for mobile nav interactions
  .ico {
    width: ui-vars.$icon-size-3;
    height: ui-vars.$icon-size-3;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  &__wrap,
  &__links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  &__links {
    transform: translateY(-4px);
    font-family: ui-vars.$font-medium;
  }

  &__link {
    text-decoration: none;
    color: ui-vars.$dark;
    margin-left: 32px;

    &:hover {
      color: ui-vars.$jambonz;
    }

    &.active {
      color: ui-vars.$jambonz;
      border-bottom: 1px solid ui-vars.$jambonz;
    }
  }

  &__icon,
  &__login {
    margin-left: auto;
  }

  &__links,
  &__login {
    @media ( max-width: vars.$mobile-width ) {
      display: none;
    }
  }

  &__icon {
    display: none;
    line-height: 0;
    cursor: pointer;

    .ico {
      transform: translateY(-5px);
    }

    @media ( max-width: vars.$mobile-width ) {
      display: block;
    }
  }

  &__mobile {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: opacity ui-vars.$base-dur ui-vars.$base-ease,
                z-index ui-vars.$base-dur ui-vars.$base-ease;
    
    &.active {
      pointer-events: auto;
      opacity: 1;
      z-index: vars.$navi-index;
    }

    // Overrides for mobile navi links
    .navi__link {
      color: ui-vars.$white;
      font-size: ui-vars.$h6-size;
      font-family: ui-vars.$font-medium;
      margin: 0;

      &:hover {
        color: ui-vars.$jambonz;
      }

      &.active {
        color: ui-vars.$jambonz;
        border-bottom: 1px solid ui-vars.$jambonz;
      }
    }

    &__head {
      padding: 16px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__icon {
      line-height: 0;
      cursor: pointer;
    }

    &__links,
    &__footer {
      text-align: center;
      padding-top: 32px;
    }

    &__links {
      .navi__link {
        padding: 4px 0;
        margin: 6px 0;
        display: inline-block;
      }
    }

    &__footer {
      padding-top: 48px;

      li {
        margin-top: 16px;
      }

      .navi__link {
        font-size: ui-vars.$m-size;
        font-family: ui-vars.$font-regular;
      }
    }

    &__support {
      text-align: center;
      padding: 32px 0;

      // Force mobile padding size on button
      .btn {
        padding: 18px 46px;
      }
    }
  }
}
