@layer components { .app-details-titlebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--app-border); padding-block-end: var(--app-spacing); margin-bottom: calc(var(--app-spacing) * 2); } .app-details-titlebar h1, .app-details-titlebar h2, .app-details-titlebar h3, .app-details-titlebar h4, .app-details-titlebar h5, .app-details-titlebar h6 { margin: 0; } .app-details-titlebar button, .app-details-titlebar [role="button"] { --app-button-padding-horizontal: 10px; --app-button-padding-vertical: 6px; font-size: 13px; margin: 0; } .app-details-titlebar button i, .app-details-titlebar [role="button"] i { font-size: 10px; } .app-details-titlebar-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .app-details-titlebar .app-detail-unsaved-indicator { margin: 0; white-space: nowrap; } .app-details-titlebar h1 i { background: var(--app-background-color); width: 35px; height: 29px; font-size: 15px; border-radius: var(--app-border-radius); display: inline-flex; align-items: center; justify-content: center; color: var(--app-contrast); border: 1px solid var(--app-border); color: var(--app-muted-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; } .app-details-titlebar h1:has(i) { display: flex; align-items: center; gap: 7px; line-height: 1; } .app-details-titlebar details.dropdown { margin-bottom: 0; } .app-details-titlebar details.dropdown summary:after { display: none; } .app-details-titlebar details.dropdown li { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid var(--app-border); } .app-details-titlebar details.dropdown li:last-child { border-bottom: none; } .app-details-titlebar details.dropdown ul { padding: 0 !important; margin: 0 !important; } .app-details-titlebar details.dropdown li button, .app-details-titlebar details.dropdown li [role="button"] { margin: 0 !important; border: none; border-radius: 0; width: 100%; text-align: left; } }