@layer components.blocks {
  .callout {
    @mixin my var(--space-9);
    counter-increment: box;

    display: grid;
    grid-template-columns: var(--slot-box-cell) minmax(0, 1fr);

    border: var(--border-card) solid var(--color-border-strong);

    background-color: var(--color-surface-elevated-1);
    box-shadow: var(--shadow-card);
  }

  .callout__kind {
    @mixin typo_label;
    @mixin ma var(--size-0);
    @mixin py var(--size-6);
    @mixin px var(--size-7);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-inline-end: var(--border-card) solid var(--color-border-strong);

    color: var(--color-text-primary);

    background-color: var(--color-surface-base);

    &::after {
      content: "Box " counter(sec, upper-roman) "." counter(box);

      font-family: var(--font-mono);
      font-size: var(--type--3);
      font-weight: var(--font-weight-body);
      color: var(--color-text-quarternary);
    }
  }

  .callout__title {
    @mixin typo_heading-4;
    @mixin mt var(--size-0);
    @mixin mb var(--size-5);

    font-size: var(--type-0);
  }

  .callout__body {
    @mixin py var(--size-6);
    @mixin px var(--size-8);

    & > :first-child {
      margin-block-start: var(--size-0);
    }

    & > :last-child {
      margin-block-end: var(--size-0);
    }
  }

  .callout--optional {
    border-width: var(--border-hairline);
    background-color: transparent;
    box-shadow: none;

    & .callout__kind {
      border-inline-end: var(--border-hairline) solid var(--color-border-normal);
      color: var(--color-text-primary);
      background-color: transparent;

      &::after {
        color: var(--color-text-quiet);
      }
    }

    & .callout__title {
      @mixin typo_label;

      font-size: var(--type--2);
      color: var(--color-text-quiet);
    }
  }
}