#ap-color-window-container #draggable-popup #popup-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1em;
}

#ap-color-window-container #color-correction-settings {
	background-color: var(--dark-grey);
	padding: 0.5em 1em 1em 1em;
	border-radius: 0.5rem;
	margin-top: 1rem;
}

#ap-color-window-container #color-correction-settings {
	grid-column: 1/2;
	grid-row: 1/3;
}

#ap-color-window-container #colors-operations {
	margin: 0.7em 0.3em 0 0.3em;
}

#ap-color-window-container #colors-operations .zeero-switch {
	margin-bottom: 0.5em;
}

#ap-color-window-container #colors-operations .zeero-switch.cube-lut-switch {
	margin-bottom: 0;
}

#ap-color-window-container #colors-operations .zeero-switch.cube-lut-switch + .block-label {
	font-size: 0.6em;
	color: var(--secondary-lighter);
}

#ap-color-window-container .block-container {
	margin-bottom: 1em;
}

#ap-color-window-container .block-label {
	font-size: 0.8em;
	font-weight: bold;
	padding: 0.5em 0;
}

#ap-color-window-container .block-label:first-of-type {
	padding-top: 0;
}

#ap-color-window-container .slider-container {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.4em 0;
}

#ap-color-window-container .slider-image {
	width: 0.8em;
	height: 0.8em;
	background-repeat: no-repeat;
	background-size: 0.8em;
}

#ap-color-window-container .slider-image.gamma {
	background-image: url("../../assets/buttons/gamma.svg");
}

#ap-color-window-container .slider-image.brightness {
	background-image: url("../../assets/buttons/brightness.svg");
}

#ap-color-window-container .slider-image.contrast {
	background-image: url("../../assets/buttons/contrast.svg");
}

#ap-color-window-container .slider-image.red {
	background-image: url("../../assets/buttons/red.svg");
}

#ap-color-window-container .slider-image.green {
	background-image: url("../../assets/buttons/green.svg");
}

#ap-color-window-container .slider-image.blue {
	background-image: url("../../assets/buttons/blue.svg");
}

#ap-color-window-container .slider {
	-webkit-appearance: none;
	width: 90%;
	height: 0.3em;
	background: #5a6268;
	outline: none;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
	border-radius: 0.3em;
}

#ap-color-window-container .slider:hover {
	opacity: 1;
}

#ap-color-window-container .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.9em;
	height: 0.9em;
	background: #6c757d;
	cursor: pointer;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #2e353af2;
	transition: background-color 0.3s;
}

#ap-color-window-container .slider::-webkit-slider-thumb:hover,
#ap-color-window-container .slider.changed::-webkit-slider-thumb {
	background: #20a8d8;
}

#ap-color-window-container .slider::-moz-range-thumb {
	-moz-user-select: none;
	appearance: none;
	width: 0.9em;
	height: 0.9em;
	background: #6c757d;
	border: none;
	cursor: pointer;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #2e353af2;
}

#ap-color-window-container .slider::-moz-range-thumb:hover,
#ap-color-window-container .slider.changed::-moz-range-thumb {
	background: #20a8d8;
}

#ap-color-window-container .color-correction-actions {
	display: flex;
	gap: 1em;
	margin-top: 1.5em;
	justify-content: flex-end;
}

#ap-color-window-container button {
	width: 100%;
	padding: 0.3em;
	cursor: pointer;
	border-radius: 3px;
	background-color: #515b65;
	text-align: center;
	font-size: 0.8em;
	transition: background-color 0.3s;
	margin-top: 1.4em;
}

/* presets' style below */

#ap-color-window-container #presets-header {
	display: grid;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.1em 0.3em 0.1em;
	border-bottom: 1px solid var(--secondary);
	height: 1.5em;
	font-weight: bold;
	font-size: 0.8em;
	gap: 1em;
	grid-template-columns: 43% 13% 10%;
}

#ap-color-window-container #presets-container {
	padding: 0.5em 1em;
	background: #212427;
	border-radius: 0.5rem;
	margin-top: 1rem;
	grid-column: 2/3;
	height: 13.5em;
}

#ap-color-window-container:has(#colors-operations > .zeero-switch.cube-lut-switch) #presets-container {
	height: 11.5em;
}

#ap-color-window-container .presets-header-save {
	width: 1em;
	height: 1em;
	opacity: 0.5;
	transition: opacity 0.3s;
	cursor: pointer;
}

#ap-color-window-container .presets-header-save.disabled {
	pointer-events: none;
	opacity: 0.3;
}

#ap-color-window-container .presets-header-save:hover {
	opacity: 0.8;
}

#ap-color-window-container #presets-body {
	overflow-y: auto;
	max-height: 88%;
	overflow-x: hidden;
	font-size: 0.9em;
}

#ap-color-window-container #presets-body .preset {
	margin-top: 0.25em;
	display: grid;
	grid-template-columns: 59% 15% 11%;
	align-items: center;
	gap: 1em;
	padding: 0.2em;
	border-radius: 5px;
	transition: background-color 0.2s;
	cursor: pointer;
	position: relative;
	height: 1.4em;
	font-size: 0.9em;
}

#ap-color-window-container #presets-body .preset:hover,
#ap-color-window-container #presets-body .preset.selected {
	background-color: #494e60;
	transition: background-color 0.2s;
}

#ap-color-window-container #presets-body .preset .preset-name {
	width: 5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex-grow: 1;
}

#ap-color-window-container #presets-body .preset .preset-action {
	justify-self: center;
}

#ap-color-window-container #presets-body .preset .preset-action.delete {
	width: 1.1em;
	opacity: 0.6;
	transition: opacity 0.2s;
	color: white;
}

#ap-color-window-container #presets-body .preset .preset-action:hover {
	opacity: 1;
	transition: opacity 0.2s;
}

#ap-color-window-container #presets-body .preset .name-input {
	border-radius: 3px;
	outline: none;
	border: none;
	background-color: #2e353a;
	color: white;
	height: 1.1em;
	padding-left: 0.35em;
	width: 9em;
}