.section-settings { background: var(--background-card); border: 2px solid var(--border); box-shadow: var(--shadow); } .section-settings,.section-settings-details { margin-bottom: .6rem; border-radius: .6rem; padding: .6rem; box-sizing: border-box; } .section-settings-details { border: 2px 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-top: .6rem; margin-bottom: .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: "\2193"; float: right; } .section-settings-details[open] summary:after { transform: rotate(180deg); animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1); } .section-settings-details:not([open]) summary:after { transform: initial; animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1); }