.nav-link {
  text-transform: uppercase;
}

.nav-tabs {
  background-color: var(--leap-tabs-background);
  white-space: nowrap;
  width: 100%;
  flex-wrap: nowrap;

  @if not $is-desktop {
    border-bottom: 0.0625rem solid var(--leap-border-color);
  }

  .nav-link {
    background-color: transparent;
    color: var(--leap-body-text-color);
    padding: var(--leap-tabs-padding);
    font-weight: var(--leap-tabs-font-weight);
    font-size: var(--leap-tabs-font-size);
    text-transform: var(--leap-tabs-casing);
    letter-spacing: var(--leap-tabs-letter-spacing);
    border-radius: 0;
    border: none;
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      position: absolute;
      height: 0.125rem;
      width: 100%;
      left: 0;
      bottom: -1px;
      transform: scaleX(0);
      z-index: 10;

      @if $enable-transitions {
        transition: all .25s ease-out;
      }
    }

    @if $is-desktop {
      &, &:hover {
        cursor: default;
        user-select: none;
      }
    }

    // IE Fix
    display: inline-block;

    &:hover {
      color: var(--leap-primary-color);
      background-color: var(--leap-body-background-color);

      @if not $is-desktop {
        &::after {
          background: var(--leap-tabs-link-hover-border);
          transform: scaleX(1);
        }
      }
    }

    &:not(.active):hover {
      background-color: var(--leap-tabs-link-hover-background);
    }

    &.active {
      background-color: transparent;
      border-color: transparent;
      color: var(--leap-tabs-link-active-color);
      &::after {
        background: var(--leap-tabs-link-active-border);
        transform: scaleX(1);
      }
    }
  }
}