@use '../collapsible-shared' as *;

@include collapsible-shared;

:host(.is-group) .collapsible-header {
  padding: calc(var(--s) / 2) var(--s);
}

.collapsible-header {
  &:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  :host.isInline & {
    display: inline-block;

    & > * {
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.collapsible-title {
  &.is-drag-handle {
    cursor: move;
  }
}
