@rolemodel/optics/dist/css/components/accordion.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

.accordion {
  /* Public API (customizable component options) */
  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */

  overflow: hidden;
  interpolate-size: allow-keywords;

  /* Elements */

  summary {
    display: grid;
    min-height: var(--_op-accordion-summary-min-height);
    align-items: center;
    cursor: pointer;
    gap: var(--op-space-2x-small);
    grid-template-columns: auto 1fr auto;

    &::marker,
    &::-webkit-details-marker {
      display: none;
      content: '';
    }

    .accordion__label {
      color: var(--op-color-neutral-on-plus-max);
      font-size: var(--op-font-x-small);
      font-weight: var(--op-font-weight-semi-bold);
    }

    .accordion__marker {
      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);

      justify-self: flex-end;
      transition: var(--op-transition-accordion);
      user-select: none;
    }
  }

  &::details-content {
    height: 0;
    transition: var(--op-transition-accordion-content);
  }

  &[open] {
    summary .accordion__marker {
      rotate: 0.25turn;
    }

    &::details-content {
      height: auto;
    }
  }

  /* Modifiers */

  &.accordion--disable-animation {
    summary .accordion__marker {
      transition: none;
    }

    &::details-content {
      transition: none;
    }
  }
}