@utility box {
  @apply card;
}

@utility card {
  & {
    @apply border-scaffold;
    @apply padding-scaffold;
  }
}

@utility card-divided {
  & {
    @apply border-scaffold;
    position: relative;

    &:is(&) {
      gap: 0;
      padding: 0;
    }

    > *:not(&),
    > :where(astro-slot, astro-island, astro-content) > *:not(&) {
      @apply padding-scaffold;
      --fallback-padding: 1rlh;

      /* Raise for nicer focus ring */
      &:focus-visible {
        z-index: 2;
      }

      &:not(:focus-visible) {
        --z-index: 1;
        animation: z-index-hack var(--transition-duration)
          var(--transition-delay);
      }
    }
  }
}

@utility card-divided-horizontal {
  @apply horizontal;
  @apply divider-between-y;

  > * {
    flex-grow: 1;
    border-width: 0;
    border-radius: 0;
  }

  /* Opt-in equal columns. :where() keeps single-class specificity so a
     responsive flip to card-divided-vertical resets flex-basis cleanly. */
  &:where(.equal) > * {
    flex-basis: 0;
  }

  > :where(:not(:first-child)) {
    border-left-width: var(--border-width);
    border-color: var(--_bc, var(--border-color));
  }

  > :where(:first-child) {
    border-radius: 0;
    border-top-left-radius: calc(var(--radius) - var(--border-width));
    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
  }

  > :where(:last-child) {
    border-radius: 0;
    border-top-right-radius: calc(var(--radius) - var(--border-width));
    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
  }
}

@utility card-divided-vertical {
  @apply vertical;
  @apply divider-between-x;

  > * {
    flex-grow: 0;
    flex-basis: auto;
    border-width: 0;
    border-radius: 0;
  }

  > :where(:not(:first-child)) {
    border-top-width: var(--border-width);
    border-style: var(--border-style);
  }

  > :where(:first-child) {
    border-top-left-radius: calc(var(--radius) - var(--border-width));
    border-top-right-radius: calc(var(--radius) - var(--border-width));
  }

  > :where(:last-child) {
    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
  }
}

@utility card-split {
  @apply card-divided;
}