@layer components {
  :root {
    /* Common */
    --body-text__text-color: var(--color-neutral-400);
    --body-text__link-color: var(--color-link);
    --body-text__link-color--hover: var(--color-link--hover);
    --body-text__link-color--active: var(--color-link--active);
    --body-text__link-text-decoration: none;
    --body-text__link-text-decoration--hover: underline;
    --body-text__link-text-decoration--active: var(
      --body-text__link-text-decoration--hover
    );

    /* sm */
    --body-text__font-family--sm: var(--typography-body-small__font-family);
    --body-text__font-size--sm: var(--typography-body-small__font-size);
    --body-text__line-height--sm: var(--typography-body-small__line-height);
    --body-text__letter-spacing--sm: var(
      --typography-body-small__letter-spacing
    );
    --body-text__font-weight--sm: var(--typography-body-small__font-weight);

    /* sm link */
    --body-text__font-family--link-sm: var(
      --typography-body-small__font-family
    );
    --body-text__font-size--link-sm: var(--typography-body-small__font-size);
    --body-text__line-height--link-sm: var(
      --typography-body-small__line-height
    );
    --body-text__letter-spacing--link-sm: var(
      --typography-body-small__letter-spacing
    );
    --body-text__font-weight--link-sm: var(
      --typography-body-medium__font-weight
    );

    /* md */
    --body-text__font-family--md: var(--typography-body-medium__font-family);
    --body-text__font-size--md: var(--typography-body-medium__font-size);
    --body-text__line-height--md: var(--typography-body-medium__line-height);
    --body-text__letter-spacing--md: var(
      --typography-body-medium__letter-spacing
    );
    --body-text__font-weight--md: var(--typography-body-medium__font-weight);

    /* md link */
    --body-text__font-family--link-md: var(
      --typography-label-medium__font-family
    );
    --body-text__font-size--link-md: var(--typography-label-medium__font-size);
    --body-text__line-height--link-md: var(
      --typography-label-medium__line-height
    );
    --body-text__letter-spacing--link-md: var(
      --typography-label-medium__letter-spacing
    );
    --body-text__font-weight--link-md: var(
      --typography-label-medium__font-weight
    );

    /* lg */
    --body-text__font-family--lg: var(--typography-body-large__font-family);
    --body-text__font-size--lg: var(--typography-body-large__font-size);
    --body-text__line-height--lg: var(--typography-body-large__line-height);
    --body-text__letter-spacing--lg: var(
      --typography-body-large__letter-spacing
    );
    --body-text__font-weight--lg: var(--typography-body-large__font-weight);

    /* lg link */
    --body-text__font-family--link-lg: var(
      --typography-label-large__font-family
    );
    --body-text__font-size--link-lg: var(--typography-label-large__font-size);
    --body-text__line-height--link-lg: var(
      --typography-label-large__line-height
    );
    --body-text__letter-spacing--link-lg: var(
      --typography-label-large__letter-spacing
    );
    --body-text__font-weight--link-lg: var(
      --typography-label-large__font-weight
    );
  }

  :root.dark {
    --body-text__text-color: var(--color-neutral-200);
  }

  .body-text--sm {
    font-family: var(--body-text__font-family--sm);
    font-size: var(--body-text__font-size--sm);
    line-height: var(--body-text__line-height--sm);
    letter-spacing: var(--body-text__letter-spacing--sm);
    font-weight: var(--body-text__font-weight--sm);
  }

  .body-text--sm a {
    font-family: var(--body-text__font-family--link-sm);
    font-size: var(--body-text__font-size--link-sm);
    line-height: var(--body-text__line-height--link-sm);
    letter-spacing: var(--body-text__letter-spacing--link-sm);
    font-weight: var(--body-text__font-weight--link-sm);
  }

  .body-text--md {
    font-family: var(--body-text__font-family--md);
    font-size: var(--body-text__font-size--md);
    line-height: var(--body-text__line-height--md);
    letter-spacing: var(--body-text__letter-spacing--md);
    font-weight: var(--body-text__font-weight--md);
  }

  .body-text--md a {
    font-family: var(--body-text__font-family--link-md);
    font-size: var(--body-text__font-size--link-md);
    line-height: var(--body-text__line-height--link-md);
    letter-spacing: var(--body-text__letter-spacing--link-md);
    font-weight: var(--body-text__font-weight--link-md);
  }

  .body-text--lg {
    font-family: var(--body-text__font-family--lg);
    font-size: var(--body-text__font-size--lg);
    line-height: var(--body-text__line-height--lg);
    letter-spacing: var(--body-text__letter-spacing--lg);
    font-weight: var(--body-text__font-weight--lg);
  }

  .body-text--lg a {
    font-family: var(--body-text__font-family--link-lg);
    font-size: var(--body-text__font-size--link-lg);
    line-height: var(--body-text__line-height--link-lg);
    letter-spacing: var(--body-text__letter-spacing--link-lg);
    font-weight: var(--body-text__font-weight--link-lg);
  }

  .body-text--sm,
  .body-text--md,
  .body-text--lg {
    color: var(--body-text__text-color);
  }

  .body-text--sm a,
  .body-text--md a,
  .body-text--lg a {
    text-decoration: var(--body-text__link-text-decoration);
    color: var(--body-text__link-color);
  }

  .body-text--sm a:hover,
  .body-text--md a:hover,
  .body-text--lg a:hover {
    text-decoration: var(--body-text__link-text-decoration--hover);
    color: var(--body-text__link-color--hover);
  }

  .body-text--sm a:active,
  .body-text--md a:active,
  .body-text--lg a:active {
    text-decoration: var(--body-text__link-text-decoration--active);
    color: var(--body-text__link-color--active);
  }

  .body-text--sm,
  .body-text--md,
  .body-text--lg {
    :root[alignment-content="start"] & {
      @apply text-start;
    }

    :root[alignment-content="center"] & {
      @apply text-center;
    }

    :root[alignment-content="end"] & {
      @apply text-end;
    }
  }
}
