.navi {
  padding: 16px 0;
  position: relative;
  z-index: $navi-index;

  // Menu / X icons for mobile nav interactions
  .icon {
    width: $icon-size-3;
    height: $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: 'objectivitymedium';
  }

  &__link {
    text-decoration: none;
    color: $charcoal;
    margin-left: 32px;

    &.active {
      color: $jambonz;
    }
  }

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

  &__links,
  &__login {
    @media (max-width: $width-tablet-2) {
      display: none;
    }
  }

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

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

    @media (max-width: $width-tablet-2) {
      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 $base-dur $base-ease,
                z-index $base-dur $base-ease;
    
    &.active {
      pointer-events: auto;
      opacity: 1;
      z-index: $navi-index;
    }

    &__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;

      li {
        margin-top: 16px;
      }

      .navi__link {
        color: $white;
        font-size: $h6-size;
        font-family: 'objectivitymedium';
        margin: 0;
      }
    }

    &__footer {
      padding-top: 48px;

      .navi__link {
        font-size: $m-size;
        font-family: 'objectivityregular';
      }
    }

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