@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
* Deprecated, please use the HDS text component to style fonts https://helios.hashicorp.design/components/text */

// font size helpers
.is-size-4 {
  font-size: var(--token-typography-display-400-font-size) !important;
}

.is-size-5 {
  font-size: size_variables.$size-5 !important;
}

.is-size-6 {
  font-size: var(--token-typography-body-300-font-size) !important;
}

.is-size-7 {
  font-size: size_variables.$size-7 !important;
}

.is-size-8 {
  font-size: var(--token-typography-body-200-font-size) !important;
}

.is-size-9 {
  font-size: size_variables.$size-9 !important;
}

// Font weight
.has-font-weight-normal {
  font-weight: var(--token-typography-font-weight-regular);
}

.has-text-weight-semibold {
  font-weight: var(--token-typography-font-weight-semibold) !important;
}

.has-text-weight-bold {
  font-weight: var(--token-typography-font-weight-bold) !important;
}

// Font family
.is-font-mono {
  font-family: var(--token-typography-font-stack-code);
}

.masked-font {
  font-family: obscure, text-security-square;
  letter-spacing: 2px;
}

// Text decoration
.is-underline {
  text-decoration: underline;
}
.is-no-underline {
  text-decoration: none;
}
.line-through {
  text-decoration: line-through;
}

// Text transformations
.is-lowercase {
  text-transform: lowercase !important;
}

.is-uppercase {
  text-transform: uppercase !important;
}

// Text alignment
.has-text-right {
  text-align: right !important;
}

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

.has-text-centered {
  text-align: center !important;
}

.has-line-height-1 {
  line-height: 1;
}

// Text color or styling
.is-help {
  font-size: var(--token-typography-body-200-font-size);
  margin-top: size_variables.$size-11;
}

.help {
  display: block;
  font-size: 0.85714rem;
  margin-top: size_variables.$size-11;
}

.sub-text {
  color: var(--token-color-foreground-faint);
  margin-bottom: size_variables.$size-11;
  font-size: var(--token-typography-body-200-font-size);

  strong {
    color: inherit;
  }
}

.opacity-050 {
  opacity: 0.5;
}
.opacity-060 {
  opacity: 0.6;
}
