.demo {
  padding: 1.5rem;
  border: 1px solid var(--color-on-purple);

  @media (max-width: 928px) {
    max-width: calc(100vi - 2rem);
  }

  > ul {
    list-style: none;
    margin: 0;

    &:not([data-padding-unset]) {
      padding: 0;
    }

    @media (max-width: 768px) {
      &:not([data-component]) {
        --min: 6ch;
      }
    }
  }

  [class*="smol"]:not([data-component]) > *:not([data-unstyled]) {
    display: grid;
    padding: 1rem;
    background-color: var(--color-purple);
    color: var(--color-on-purple);
    font-size: clamp(1.5rem, 4vi, 2rem);
    font-weight: bold;
    text-align: center;
    border-radius: 0.15em;
    border: 1px dashed;

    &:not([data-text]) {
      place-content: center;
    }

    &[data-text] {
      font-size: 1.15rem;
      text-align: left;
    }
  }

  [data-container-style] {
    outline: 2px dotted var(--color-on-surface);
  }

  [data-component][class*="component"] {
    --component-surface: #{color("color-surface")};
    --on-component-surface: #{color("color-on-surface")};
    background-color: var(--component-surface);
    color: var(--on-component-surface);
  }

  &[data-layout="centered"] {
    display: grid;
    place-content: center;
    min-height: 10rem;
  }
}

// Seeking a pointer because @supports for `resize`
// returns false positive on iOS
@media (any-hover: hover) and (any-pointer: fine) {
  .demo:not(.no-resize) {
    position: relative;
    resize: horizontal;
    overflow: auto;

    &::after {
      content: "Resize me!";
      position: absolute;
      right: 0.85rem;
      bottom: 0.65rem;
      font-size: 0.8rem;
      line-height: 0;
      color: var(--color-on-purple);
    }
  }
}

@media not all and (min-resolution: 0.001dpcm) {
  .demo {
    resize: none;

    &::after {
      content: "";
    }
  }
}

.smol-focus-styles {
  display: grid;
  gap: 2rem;

  li {
    display: grid;
    gap: 0.5rem;
    justify-content: start;
  }

  button {
    color: var(--color-on-purple);
    background-color: var(--color-purple);
    border-style: solid;
    border-radius: 4px;
    font: inherit;
    padding: 0.25em 0.5em;
    cursor: pointer;
  }
}

.demo .smol-breakout-grid {
  --max-content-width: min(50ch, 50vi);

  @media (width < 80ch) {
    --breakout-difference: 0.4;
  }
}
