@layer component {
  .container {
    --callout-bg: var(--color-surface-inverse);
    --callout-fg: var(--color-text-inverse);
    --callout-symbol: "";
    --callout-symbol-color: var(--color-text-inverse);

    @mixin my var(--spacing-cozy);

    position: relative;
    padding: var(--spacing-cozy)  var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
    border: var(--size-1) solid var(--color-surface-inverse);
    box-shadow: 2px 2px 0 oklch(from var(--color-surface-inverse) calc(l - 0.075) c h), 4px 4px 0 oklch(from var(--color-surface-inverse) calc(l - 0.2) c h);

    &::before {
      @mixin pt 0.425em;

      content: var(--callout-symbol);

      position: absolute;
      top: 0;
      left: 0;

      display: flex;
      align-items: flex-start;
      justify-content: center;

      width: var(--size-8);
      height: 100%;

      font-size: 1.5em;
      color: var(--callout-symbol-color);

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

    }
  }

  .title {
    @mixin text-xl;

    font-family: var(--font-header);
    font-weight: var(--typo-weight-black);
  }

  .badge {
    position: absolute;
    top: 0;
    right: 0;

    padding: 0.2em 0.5em;

    font-family: var(--font-mono);
    font-size: var(--typo-size-xs);
    font-weight: var(--typo-weight-black);
    color: var(--callout-fg);

    background: var(--callout-bg);
  }

  .example {
    --callout-bg: var(--color-palette-fuchsia);
    --callout-symbol: "◆";
  }

  .info {
    --callout-bg: var(--color-state-info);
    --callout-symbol: "‽";
  }

  .warning {
    --callout-bg: var(--color-state-warning);
    --callout-symbol: "‼";
  }

  .tip {
    --callout-bg: var(--color-palette-lime-green);
    --callout-symbol: "★";
  }

  .spoiler {
    & .label {
      @mixin text-xl;

      font-family: var(--font-header);
      font-weight: var(--typo-weight-black);

      &::before {
        content: "[REDACTED] ";
        color: var(--color-state-error);
      }

      &:hover {
        cursor: pointer;
      }
    }

    & .content {
      pointer-events: none;
      position: relative;
      min-height: 3em;

      &::after {
        content: '████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████';

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        overflow: hidden;

        font-family: var(--font-mono);
        line-height: inherit;
        color: var(--color-text-primary);
        letter-spacing: -0.15em;
        word-break: break-all;
        white-space: pre-wrap;

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

    & .toggle {
      @util hide-visually;

      &:checked {
        & ~ .label {
          &::before {
            content: '[REVEALED] ';
            color: var(--color-state-success);
          }
        }

        & ~ .content {
          &::after {
            content: none;
          }
        }
      }
    }
  }
}