@layer ed-utilities {
  /* #region General ~~~~~ */
  [class*='ed-body'] {
    font-family: var(--ed-font-family-body);
    font-weight: var(--ed-font-weight-body);
    line-height: var(--ed-line-height-normal);
  }

  [class*='ed-heading'] {
    font-family: var(--ed-font-family-heading);
    font-weight: var(--ed-font-weight-heading);
    line-height: var(--ed-line-height-expanded);
    text-wrap: balance;
    color: var(--ed-color-title);
  }

  [class*='ed-caption'] {
    color: var(--ed-color-text);
    font-family: var(--ed-font-family-body);
    font-weight: var(--ed-font-weight-body);
    line-height: var(--ed-line-height-expanded);
    color: var(--ed-color-subtitle);
  }

  .ed-font-size-2xs,
  .ed-body-2xs,
  .ed-heading-2xs,
  .ed-caption-2xs {
    font-size: var(--ed-font-size-2xs);
  }

  .ed-font-size-xs,
  .ed-body-xs,
  .ed-heading-xs,
  .ed-caption-xs {
    font-size: var(--ed-font-size-xs);
  }

  .ed-font-size-s,
  .ed-body-s,
  .ed-heading-s,
  .ed-caption-s {
    font-size: var(--ed-font-size-s);
  }

  .ed-font-size-m,
  .ed-body-m,
  .ed-heading-m,
  .ed-caption-m {
    font-size: var(--ed-font-size-m);
  }

  .ed-font-size-l,
  .ed-body-l,
  .ed-heading-l,
  .ed-caption-l {
    font-size: var(--ed-font-size-l);
  }

  .ed-font-size-xl,
  .ed-body-xl,
  .ed-heading-xl,
  .ed-caption-xl {
    font-size: var(--ed-font-size-xl);
  }

  .ed-font-size-2xl,
  .ed-body-2xl,
  .ed-heading-2xl,
  .ed-caption-2xl {
    font-size: var(--ed-font-size-2xl);
  }

  .ed-font-size-3xl,
  .ed-body-3xl,
  .ed-heading-3xl,
  .ed-caption-3xl {
    font-size: var(--ed-font-size-3xl);
  }

  .ed-font-size-4xl,
  .ed-body-4xl,
  .ed-heading-4xl,
  .ed-caption-4xl {
    font-size: var(--ed-font-size-4xl);
  }

  .ed-font-weight-light {
    font-weight: var(--ed-font-weight-light);
  }

  .ed-font-weight-normal {
    font-weight: var(--ed-font-weight-normal);
  }

  .ed-font-weight-semibold {
    font-weight: var(--ed-font-weight-medium);
  }

  .ed-font-weight-bold {
    font-weight: var(--ed-font-weight-bold);
  }

  .ed-color-text-normal {
    color: var(--ed-color-text);
  }

  .ed-color-text-link {
    color: var(--ed-color-text-link);
  }

  .ed-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ed-text-nowrap {
    text-wrap: nowrap;
  }

  .ed-text-balance {
    text-wrap: balance;
  }

  @supports (text-wrap: pretty) {
    .ed-text-pretty {
      text-wrap: pretty;
    }
  }

  .ed-text-uppercase {
    text-transform: uppercase;
  }

  .ed-text-lowercase {
    text-transform: lowercase;
  }

  .ed-text-capitalize {
    text-transform: capitalize;
  }

  .ed-text-start {
    text-align: start;
  }

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

  .ed-text-end {
    text-align: end;
  }

  .ed-text-justify {
    text-align: justify;
  }
  /* #endregion */

  /* #region Links ~~~~~~~ */
  .ed-link {
    color: var(--ed-color-text-link);
    text-decoration: var(--ed-link-decoration-default);
    -webkit-text-decoration: var(--ed-link-decoration-default);
    text-decoration-thickness: round(0.0625em, 1px);
    text-underline-offset: 0.125em;
    cursor: pointer;

    @media (hover: hover) {
      &:hover {
        text-decoration: var(--ed-link-decoration-hover);
        -webkit-text-decoration: var(--ed-link-decoration-hover);
      }
    }

    &:active {
      text-decoration: var(--ed-link-decoration-hover);
      -webkit-text-decoration: var(--ed-link-decoration-hover);
      text-decoration-thickness: round(0.125em, 1px);
    }
  }

  .ed-link-plain {
    color: var(--ed-color-text);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--ed-color-mix-hover));
        text-decoration: none;
      }
    }
  }
  /* #endregion */

  /* #region Lists ~~~~~~~ */
  .ed-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;

    > li {
      margin-inline-start: 0;
    }
  }
  /* #endregion */

  /* #region Form Controls */
  .ed-form-control-label {
    color: var(--ed-form-control-label-color);
    font-weight: var(--ed-form-control-label-font-weight);
    line-height: var(--ed-form-control-label-line-height);
  }

  .ed-form-control-value {
    color: var(--ed-form-control-value-color);
    font-weight: var(--ed-form-control-value-font-weight);
    line-height: var(--ed-form-control-value-line-height);
  }

  .ed-form-control-placeholder {
    color: var(--ed-form-control-placeholder-color);
    font-weight: var(--ed-form-control-value-font-weight);
    line-height: var(--ed-form-control-value-line-height);
  }

  .ed-form-control-hint {
    color: var(--ed-form-control-hint-color);
    font-weight: var(--ed-form-control-hint-font-weight);
    font-size: var(--ed-font-size-smaller);
    line-height: var(--ed-form-control-hint-line-height);
  }
  /* #endregion */
}