@layer repui.components {
  :where(.rui-collapsible) {
    min-inline-size: 0;
    border: 1px solid var(--rui-color-border);
    border-radius: var(--rui-radius-lg);
    background: var(--rui-color-surface);
    overflow: hidden;
  }

  :where(.rui-collapsible__trigger) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rui-space-4);
    inline-size: 100%;
    padding: var(--rui-space-4);
    border: 0;
    background: transparent;
    color: var(--rui-color-text);
    font: inherit;
    font-weight: var(--rui-font-weight-semibold);
    text-align: start;
    cursor: pointer;
  }

  :where(.rui-collapsible__trigger:hover) { background: var(--rui-color-surface-muted); }
  :where(.rui-collapsible__indicator) { transition: transform 160ms ease; }
  :where(.rui-collapsible[data-state="open"] .rui-collapsible__indicator) { transform: rotate(180deg); }
  :where(.rui-collapsible__content) { border-block-start: 1px solid var(--rui-color-border); }
  :where(.rui-collapsible__body) { padding: var(--rui-space-4); color: var(--rui-color-text-muted); }
}