:root {
	--dimmed-border-color: color-mix(in srgb, currentColor 10%, transparent);
}

.image-view {
	background-color: #111;
}

.video-view {
	background-color: #000;
}

.print-view {
	background-color: #111;
}

.slideshow-view {
	background-color: #000;
}

popover.deeper > arrow,
popover.deeper > contents {
	border: 1px solid #111;
}

.thumbnail-grid {
	padding: 10px;
}

.thumbnail-grid > child {
	margin: 10px;
	border-radius: 10px;
	border: 1px solid var(--dimmed-border-color);
}

.thumbnail-grid > child.drop-target-left {
	border-left-color: var(--accent-color);
}

.thumbnail-grid > child.drop-target-right {
	border-right-color: var(--accent-color);
}

.thumbnail-card {
	padding: 6px;
	border-radius: 4px;
}

.thumbnail-icon {
	color: #ffffff33;
}

.statusbar {
	padding: 4px;
}

.mediabar,
.statusbar.floating {
	background: var(--headerbar-bg-color);
	border: 1px solid #445;
	border-radius: 12px;
	padding: 6px;
}

.statusbar.floating {
	padding: 6px;
}

.mediabar.image {
	padding: 6px 6px 6px 18px;
}

.sidebar-header,
.sidebar-footer {
	padding: 10px 8px;
}

.sidebar-header {
	--border-opacity: 10%;
	border-bottom: 1px solid var(--dimmed-border-color);
}

.sidebar-footer {
	--border-opacity: 10%;
	border-top: 1px solid var(--dimmed-border-color);
}

.smaller-text {
	font-size: 0.9em;
}

.property-sidebar {
	padding: 0 12px 12px 6px;
}

.property-widget {
	--border-opacity: 10%;
	margin: 0;
	padding: 0;
	background: var(--card-bg-color);
	border-radius: 0;
	border-color: var(--window-bg-color);
}

.property-widget:hover {
	background: #434348;
}

.property-widget.description {
	background: #62574c;
	color: #fff;
}

.property-widget.description:hover {
	background: #6d6154;
}

.property-header {
	margin: 6px 0px 6px 0px;
}

.property-row {
	padding: 12px;
	margin: 0;
}

.property-title {
	font-size: 0.9em;
}

.property-subtitle {
}

.mini-search-bar {
	font-size: 0.9em;
	padding: 0;
}

.time-scale {
	padding: 0;
}

popover.button-list button {
	font-weight: normal;
}

.popup.for_toolbar > button {
	padding: 1px 12px;
}

button.for_statusbar label {
	font-weight: normal;
}

.test-list-row {
	padding: 6px 12px;
}

.dialog-content > .message-area {
	padding: 0px 24px 6px;
}

.dialog-content > .response-area {
	padding: 12px 24px 24px;
}

.dialog-content > .response-area > .text-button {
	padding: 10px 20px;
	border-radius: 12px;
}

.dialog-content > .response-area.small-buttons {
	padding-top: 6px;
}

.dialog-content > .response-area.small-buttons > .text-button {
	padding: 6px 18px;
	border-radius: 9px;
}

.preferences-page {
	padding: 12px 24px 0 24px;
}

.preferences-page > .response-area {
	padding: 0 24px 24px;
}

.action-item {
	padding: 2px;
}

.drag-handle label.title {
	border-radius: 5px;
	background: var(--border-color);
	font-size: 0.3em;
	padding: 0 5em;
}

textview.boxed {
	background: var(--card-bg-color);
	padding: 5px 12px;
	border: 1px solid transparent;
	border-radius: 12px;
}

textview.boxed:focus {
	border-color: var(--accent-color);
}

.rating {
	padding: 8px;
	border-radius: 8px;
}

.rating:hover {
	background: rgba(255,255,255, 0.1);
}

.tag {
	border-radius: 8px;
	background: var(--card-bg-color);
	color: var(--card-fg-color);
	border-radius: 16px;
	padding: 0 0 0 12px;
}

button.small {
	padding: 0;
}

.tool-button {
	padding: 6px;
	font-size: 85%;
}

.rounded {
	border-radius: 12px;
}

.property.terminal {
	background: #111;
	color: #fff;
	font-family: monospace;
}

.property.terminal.activatable:hover {
	background: #161616;
}

.property.terminal label {
	padding: 0.5em 0;
}

label.selector-header {
	margin-left: 16px;
}

button.category {
	border-radius: 1.5em;
	padding: 3px 16px;
}

.for_toolbar > .text-button {
	padding: 2px 12px;
}

.color-preview {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	border-radius: 12px;
}

.main-window toast {
    margin-bottom: 96px;
}

.filter-preview > button {
	margin: 6px 0;
	padding: 4px;
	border: 3px solid var(--border-color);
	background: rgba(0, 0, 0, 0.1);
}

.filter-preview > button:hover {
	border-color: oklab(from var(--border-color) L a b / 0.5);
}

.filter-preview > button:checked,
.filter-preview > button:checked:hover,
.filter-preview > button:active {
	border-color: oklab(from var(--accent-bg-color) 0.65 a b);
}

.filter-preview > button:active,
.filter-preview > button:checked:active {
	border-color: oklab(from var(--accent-bg-color) 0.75 a b);
}

.filter-preview > label {
	font-size: 0.9em;
}

.button-label {
	font-weight: bold;
}

.tool-options {
	margin-left: 6px;
	margin-right: 6px;
}

.test-options > entry,
.test-options > dropdown,
.test-options > spinbutton,
label.test-options {
	font-size: 90%;
}

.test-options > entry {
	padding: 0 10px;
}

.test-options > dropdown {
	padding: 0;
}
