@layer components {
  .clamp__text {
    max-block-size: 3lh;
    overflow: hidden;

    .clamp:has(> .clamp__toggle[open]) & {
      max-block-size: none;
    }
  }

  .clamp__toggle {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);

    .clamp__summary {
      cursor: pointer;
    }

    &:not([open]) .clamp__less,
    &[open] .clamp__more {
      display: none;
    }
  }
}