[ui-accordion] {
  display: grid;
  gap: var(--spacing-12);
}
[ui-accordion]:not(:has([ui-accordion-item])) {
    display: none;
  }
:is([ui-accordion] [ui-accordion-item]) > label {
      display: grid;
      cursor: pointer;
      user-select: none;
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
      padding: var(--spacing-24) var(--spacing-24) calc(var(--spacing-24) - var(--spacing-2));
      transition: var(--transition-standard-default-effects);
    }
:is(:is([ui-accordion] [ui-accordion-item]) > label) input[type="checkbox"] {
        scale: 0;
        opacity: 0;
        visibility: hidden;
        position: absolute;
      }
:is(:is([ui-accordion] [ui-accordion-item]) > label) [ui-accordion-trigger] {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
:is(:is(:is([ui-accordion] [ui-accordion-item]) > label) [ui-accordion-trigger]) > [ui-icon] {
          transition: var(--transition-standard-default-effects);
        }
:is(:is([ui-accordion] [ui-accordion-item]) > label) [ui-accordion-portal] {
        opacity: 0.8;
        display: grid;
        grid-template-rows: 0fr;
        transition: var(--transition-standard-default-effects);
      }
:is(:is(:is([ui-accordion] [ui-accordion-item]) > label) [ui-accordion-portal]) [ui-accordion-content] {
          overflow: hidden;
        }
:is(:is([ui-accordion] [ui-accordion-item]) > label):hover {
        background-color: var(--color-surface-container);
      }
:is(:is(:is([ui-accordion] [ui-accordion-item]) > label):has(input[type="checkbox"]:checked) [ui-accordion-trigger]) [ui-icon] {
            rotate: 135deg;
          }
:is(:is([ui-accordion] [ui-accordion-item]) > label):has(input[type="checkbox"]:checked) [ui-accordion-portal] {
          grid-template-rows: 1fr;
          padding-block-start: var(--spacing-16);
        }