.ysb-color-combination,
.ysb-color-selfcheck {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	background: #ffffff
}
.ysb-cc-color-code {
	display: flex;
	font-family: var(--y-font-family-code);
	gap: 0.5em;

}
.ysb-cc-color-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--yuhura-toolbox-button-padding);
	border: var(--yuhura-toolbox-border);
	box-shadow: var(--yuhura-toolbox-shadow);
}
.ysb-cc-swatch {
	width: 24px;
	height: 24px;
	display: inline-block;
	border: var(--yuhura-toolbox-border);
	border-radius: var(--y-border-radius-s);
}

.ysb-cc-preview {
	padding: var(--y-box-padding);
	text-align: center;
}
.contrast-fail .ysb-cc-summary  .ysb-cc-ratio-wrapper{
	color: var(--yuhura-alert)
}
.contrast-large-only .ysb-cc-summary  .ysb-cc-ratio-wrapper{
	color: var(--yuhura-warning)
}
.contrast-aa .ysb-cc-summary .ysb-cc-ratio-wrapper {
	color: var(--yuhura-okay)
}
.ysb-cc-detail,
.ysb-cc-summary {
	text-align: center;
	padding: var(--y-box-padding);
}
.ysb-cc-summary p {
	margin: 0;
	padding: 0;
}
.ysb-cc-ratio-wrapper {
	font-weight: 600;
	font-size: 1.5em;
}
.ysb-cc-ratio {
	margin-left: 0.5em;
}
.ysb-cc-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ysb-cc-detail {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	padding: 0.5em;
	font-size: 0.75em;
}
/* 90° Rotation bei Large-Only */
.ysb-rotated {
	transform: rotate(-90deg);
	display: inline-block;
}
.ysb-selfcheck-row {
	display: flex;
	justify-content: space-between ;
	padding: var(--yuhura-toolbox-button-padding);
	align-items: flex-end;
	width: 50%;
	gap: 0.5em;
}
.ysb-selfcheck-colorpicker {
	min-width: 50px;
	height: var(--y-field-height)
}
.ysb-selfcheck-controls {
	display: flex;
	flex-direction: row;
	align-content: stretch;
	width: 100%;
	gap: 0.5em;
}