/* Body */
.typography {
  &.weight-normal {
    font-weight: 400;
  }

  &.weight-medium {
    font-weight: 500;
  }

  &.weight-bold {
    font-weight: 600;
  }

  &.body {
    font-size: 1rem;
    line-height: 1.32;
    letter-spacing: 0.005rem;

    &.family-regular {
      font-family: "Archivo", sans-serif;
    }

    &.family-condensed {
      font-family: "Archivo SemiCondensed", sans-serif;
    }

    &.size-s {
      font-size: 0.875rem;
      line-height: 1.32;
      letter-spacing: 0.00875rem;
    }

    &.size-xs {
      font-size: 0.8125rem;
      line-height: 1.32;
      letter-spacing: 0.01625rem;
    }

    &.size-xxs {
      font-size: 0.75rem;
      line-height: 1.32;
      letter-spacing: 0.015rem;
    }
  }

  &.label {
    &.family-condensed {
      font-family: "Archivo SemiCondensed", sans-serif;

      font-size: 1rem;
      line-height: normal;
      letter-spacing: 0.02rem;

      &.size-s {
        font-size: 0.875rem;
        line-height: normal;
        letter-spacing: 0.0175rem;
      }

      &.size-xs {
        font-size: 0.8125rem;
        line-height: normal;
        letter-spacing: 0.008125rem;
      }

      &.size-xxs {
        font-size: 0.75rem;
        line-height: 1;
        /* letter-spacing: 0.008125rem; */
      }
    }

    &.family-mono {
      font-family: "Commit Mono", monospace;

      font-size: 1rem;
      line-height: normal;
      letter-spacing: normal;

      &.size-s {
        font-size: 0.875rem;
        line-height: normal;
        letter-spacing: normal;
      }

      &.size-xs {
        font-size: 0.8125rem;
        line-height: normal;
        letter-spacing: normal;
      }
      &.size-xxs {
        font-size: 0.75rem;
        line-height: 1;
        /* letter-spacing: 0.008125rem; */
      }
    }
  }

  &.title {
    font-size: 1.125rem;
    line-height: 124%;
    letter-spacing: 0.03375rem;

    &.family-regular {
      font-family: "Archivo", sans-serif;
    }

    &.size-m {
      font-size: 1.25rem;
      line-height: 124%;
      letter-spacing: 0.0375rem;
    }

    &.size-l {
      font-size: 1.375rem;
      line-height: 124%;
      letter-spacing: 0.04125rem;
    }
  }

  &.headline {
    font-size: 1.5rem;
    line-height: 116%;
    letter-spacing: 0.015rem;

    &.family-regular {
      font-family: "Archivo", sans-serif;
    }

    &.size-m {
      font-size: 1.75rem;
      line-height: 116%;
      letter-spacing: 0.0175rem;
    }

    &.size-l {
      font-size: 2rem;
      line-height: 116%;
      letter-spacing: 0.06rem;
    }

    &.size-xl {
      font-size: 2.5rem;
      line-height: 104%;
      letter-spacing: -0.06rem;
    }

    &.size-xxl {
      font-size: 3rem;
      line-height: 104%;
      letter-spacing: -0.06rem;
    }
  }

  &.teaser {
    font-size: 3rem;
    line-height: normal;
    letter-spacing: -0.06rem;

    &.family-regular {
      font-family: "Archivo", sans-serif;
    }
  }

  &.align-left {
    text-align: left;
  }

  &.align-center {
    text-align: center;
  }

  &.align-right {
    text-align: right;
  }

  &.uppercase {
    text-transform: uppercase;
  }
  &.lowercase {
    text-transform: lowercase;
  }
  &.capitalize {
    text-transform: capitalize;
  }
}

.typography.in-Button {
  @apply max-w-full overflow-hidden whitespace-nowrap text-ellipsis;
}
.typography.in-Label {
  [data-required]:not([data-readonly]) &::after {
    @apply fg-def-4 ml-1;

    content: "*";
    font-family: "Commit Mono", monospace;
    font-size: 0.6875rem;
  }
}
.typography.in-Modal-title {
  @apply mx-auto;
}
.typography.in-TagSelect-label {
  @apply flex gap-2;
}
.typography.in-Select-item-label {
  @apply flex w-full items-center;
}
.typography.in-SelectService-item-description {
  @apply flex justify-between;
}
