.section-settings { background: var(--background-card); border: 1px solid var(--border); box-shadow: var(--shadow); } .section-settings, .section-settings-details { border-radius: .6rem; box-sizing: border-box; margin-bottom: .6rem; padding: .6rem; } .section-settings-details { border: 1px solid var(--border); } .section-settings-details-title { display: block; } .section-settings-details[open] { border-left: 2px solid var(--foreground); } .section-settings-details[open] > summary:first-child { margin-bottom: var(--s); } .section-settings-details summary + form { padding-left: var(--s); } .section-settings hr { margin-bottom: .6rem; margin-top: .6rem; } .section-settings-details summary em:first-letter, .section-settings-details summary h3:first-letter { text-transform: uppercase; } .section-settings-details[open] .set-nav li:last-of-type { margin-bottom: 0; } .section-settings-details summary:after { content: "\1F817"; float: right; } .section-settings-details[open] summary:after { animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); transform: rotate(180deg); } .section-settings-details:not([open]) summary:after { animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); transform: initial; }