@layer components {
  :root {
    --screen-description__font-family: var(
      --typography-title-medium__font-family
    );
    --screen-description__font-size: var(--typography-title-medium__font-size);
    --screen-description__line-height: var(
      --typography-title-medium__line-height
    );
    --screen-description__letter-spacing: var(
      --typography-title-medium__letter-spacing
    );
    --screen-description__font-weight: var(
      --typography-title-medium__font-weight
    );
    --screen-description__text-color: var(--color-neutral-400);
  }
  :root.dark {
    --screen-description__text-color: var(--color-neutral-200);
  }

  .screen-description {
    font-family: var(--screen-description__font-family);
    font-size: var(--screen-description__font-size);
    line-height: var(--screen-description__line-height);
    letter-spacing: var(--screen-description__letter-spacing);
    font-weight: var(--screen-description__font-weight);
    text-align: var(--screen-description__text-align);
    color: var(--screen-description__text-color);
    /* For breaking long links */
    overflow-wrap: anywhere;

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

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

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

      ol {
        @apply text-end;
      }
    }

    ol {
      @apply text-start list-decimal;
      @apply py-6 ps-8;
      @apply space-y-5;
    }
  }
}
