@layer addon { .collectionFaq { .grid { gap: 8px; } .item { details { background-color: transparent; border: 1px solid var(--color-light); border-radius: 8px; transition: var(--transition); summary { font-size: var(--s-fontsize); font-weight: 500; padding: var(--gutter) var(--gutter) var(--gutter) var(--padding); align-items: center; .icon { color: currentColor; width: 16px; min-width: 16px; height: 16px; } } article { .block { background-color: transparent; } } .inner { display: flex; color: var(--color-dark); padding: 0 var(--padding) var(--gutter) var(--padding); } &[open] { background-color: var(--color-light); color: var(--color-dark); .content { color: var(--color-dark); } } .themeColor1 & { border-color: var(--color-dark); &[open] { border: 0; background: var(--gradient); border-color: var(--color-light); color: var(--color-light); .icon { color: var(--color-light); } .content { color: var(--color-light) } } } } } .inner { grid-template-rows: auto 1fr; .intro { grid-row: 1; align-content: start; } .grid { grid-row: 1 / span 2; } .buttons { align-content: start; grid-column: 1 / span 5; grid-row: 2; } } } }