@utility animation-delay-* {
  animation-delay: calc(--value(integer) * 1ms);
}

@utility animation-duration-* {
  animation-duration: calc(--value(integer) * 1ms);
}

@utility capsize-* {
  &::before {
    content: '';
    margin-bottom: calc(-1em * --value([number]));
    display: table;
  }
  &::after {
    content: '';
    margin-top: calc(-1em * --value([number]));
    display: table;
  }
  & > [class*='capsize-'],
  & > & {
    &::before,
    &::after {
      display: none !important;
    }
  }
}

@utility capsize-before-* {
  &::before {
    content: '';
    margin-bottom: calc(-1em * --value([number]));
    display: table;
  }
  & > &::before {
    display: none !important;
  }
}

@utility capsize-after-* {
  &::after {
    content: '';
    margin-top: calc(-1em * --value([number]));
    display: table;
  }
  & > &::after {
    display: none !important;
  }
}

@utility capsize-none {
  &::before,
  &::after {
    display: none !important;
  }
}

/**
  * Font Feature Settings for Inter
  */
@utility readability-features {
  font-feature-settings: var(--readability-features);
}

@utility readability-number-features {
  font-feature-settings: var(--readability-number-features);
}

@utility grid-areas-* {
  grid-template-areas: --value([*]);
}

@utility grid-in-* {
  grid-area: --value([*]);
}

@custom-variant supports-color-mix {
  @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
    @slot;
  }
}

@custom-variant supports-svh {
  @supports (height: 100svh) {
    @slot;
  }
}