/* Heading */
.navds-heading {
  font-weight: var(--ax-font-weight-bold);
  margin: 0;
}

.navds-heading--xlarge {
  font-size: var(--ax-font-size-heading-2xlarge);
  letter-spacing: -0.01em;
  line-height: var(--ax-font-line-height-heading-2xlarge);
}

.navds-heading--xlarge.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-5);
}

.navds-heading--large {
  font-size: var(--ax-font-size-heading-xlarge);
  letter-spacing: -0.008em;
  line-height: var(--ax-font-line-height-heading-xlarge);
}

.navds-heading--large.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-4);
}

/* Mobile scale */
@media (max-width: 480px) {
  .navds-heading--xlarge {
    font-size: var(--ax-font-size-heading-xlarge);
    letter-spacing: -0.008em;
    line-height: var(--ax-font-line-height-heading-xlarge);
  }

  .navds-heading--xlarge.navds-typo--spacing {
    margin-bottom: var(--ax-spacing-4);
  }

  .navds-heading--large {
    font-size: var(--ax-font-size-heading-large);
    letter-spacing: -0.004em;
    line-height: var(--ax-font-line-height-heading-large);
  }

  .navds-heading--large.navds-typo--spacing {
    margin-bottom: var(--ax-spacing-3);
  }
}

.navds-heading--medium {
  font-size: var(--ax-font-size-heading-medium);
  letter-spacing: -0.002em;
  line-height: var(--ax-font-line-height-heading-medium);
}

.navds-heading--medium.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-3);
}

.navds-heading--small {
  font-size: var(--ax-font-size-heading-small);
  letter-spacing: -0.001em;
  line-height: var(--ax-font-line-height-heading-small);
}

.navds-heading--small.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-3);
}

.navds-heading--xsmall {
  font-size: var(--ax-font-size-heading-xsmall);
  letter-spacing: -0.001em;
  line-height: var(--ax-font-line-height-heading-xsmall);
}

.navds-heading--xsmall.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-3);
}

/* Ingress */
.navds-ingress {
  font-size: var(--ax-font-size-xlarge);
  font-weight: var(--ax-font-weight-regular);
  letter-spacing: -0.001em;
  line-height: var(--ax-font-line-height-xlarge);
  margin: 0;
}

.navds-ingress.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-10);
}

/* Body */
.navds-body-long {
  font-size: var(--ax-font-size-large);
  font-weight: var(--ax-font-weight-regular);
  letter-spacing: 0;
  line-height: var(--ax-font-line-height-xlarge);
  margin: 0;
}

.navds-body-long.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-7);
}

.navds-body-long--large {
  font-size: var(--ax-font-size-xlarge);
  letter-spacing: -0.0013em;
  line-height: var(--ax-font-line-height-xlarge);
}

.navds-body-long--large.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-10);
}

.navds-body-long--small {
  font-size: var(--ax-font-size-medium);
  letter-spacing: 0.002em;
  line-height: var(--ax-font-line-height-large);
}

.navds-body-long--small.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-6);
}

.navds-body-short {
  font-size: var(--ax-font-size-large);
  font-weight: var(--ax-font-weight-regular);
  letter-spacing: 0;
  line-height: var(--ax-font-line-height-large);
  margin: 0;
}

.navds-body-short.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-3);
}

.navds-body-short--large {
  font-size: var(--ax-font-size-xlarge);
  letter-spacing: -0.0013em;
  line-height: var(--ax-font-line-height-large);
}

.navds-body-short--large.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-4);
}

.navds-body-short--small {
  font-size: var(--ax-font-size-medium);
  letter-spacing: 0.002em;
  line-height: var(--ax-font-line-height-medium);
}

.navds-body-short--small.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-2);
}

/* Label */
.navds-label {
  font-size: var(--ax-font-size-large);
  font-weight: var(--ax-font-weight-bold);
  letter-spacing: 0;
  line-height: var(--ax-font-line-height-large);
  margin: 0;
}

.navds-label.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-3);
}

.navds-label--small {
  font-size: var(--ax-font-size-medium);
  letter-spacing: 0.002em;
  line-height: var(--ax-font-line-height-medium);
}

.navds-label--small.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-2);
}

/* Small text */
.navds-detail {
  font-size: var(--ax-font-size-small);
  letter-spacing: 0.004em;
  line-height: var(--ax-font-line-height-medium);
  margin: 0;
}

.navds-detail.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-2);
}

.navds-detail.navds-typo--uppercase {
  text-transform: uppercase;
}

.navds-detail--small {
  font-weight: var(--ax-font-weight-regular);
}

.navds-detail--small.navds-typo--spacing {
  margin-bottom: var(--ax-spacing-2);
}

.navds-error-message {
  color: var(--ax-text-danger);

  &.navds-error-message--show-icon {
    display: flex;
    gap: var(--ax-spacing-1);

    & svg {
      margin-top: 0.15em;
      flex: 0 0 auto;
      width: 1em;
      height: 1em;
    }
  }
}

/* -------------------------------- Utilities ------------------------------- */
.navds-typo--truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navds-typo--semibold {
  font-weight: var(--ax-font-weight-bold);
}

.navds-typo--align-start {
  text-align: start;
}

.navds-typo--align-center {
  text-align: center;
}

.navds-typo--align-end {
  text-align: end;
}

.navds-typo--visually-hidden {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  top: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.navds-typo--color-subtle {
  color: var(--ax-text-subtle);
}
