/* ContentStock shared UI controls: nur Klassen (Buttons, Formularaufbau). Grundstyles für input/select/textarea/button
   liegen in ui-controls-elements.css (Editor) bzw. ui-controls-elements-scoped.css (Website, nur in Verwaltungsbereichen). */

/* Komponenten-Display darf den versteckten Zustand auch ohne Foundation nicht überstimmen. */
.cs-button[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

.cs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: var(--cs-control-height-md);
	padding: 0 var(--cs-control-padding-x-md);
	border: 1px solid var(--cs-control-border);
	border-radius: var(--cs-radius-md);
	background-color: var(--cs-control-bg);
	color: var(--cs-control-text);
	font: inherit;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	&:hover {
		border-color: var(--cs-control-border-hover);
		background-color: var(--cs-control-bg-hover);
	}
	&:focus-visible {
		border-color: var(--cs-control-border-focus);
		box-shadow: var(--cs-shadow-focus);
		outline: none;
	}
	&:active {
		transform: translateY(1px);
	}
	&:disabled {
		cursor: not-allowed;
		opacity: .5;
	}
}

.cs-button--primary {
	border-color: var(--cs-color-primary);
	background-color: var(--cs-color-primary);
	color: var(--cs-color-on-primary);
	&:hover {
		border-color: var(--cs-color-primary);
		background-color: var(--cs-color-primary-hover);
	}
}

.cs-button--danger {
	color: var(--cs-color-danger);
}

/* Icon-Größen und beschriftete Icon-Buttons gehören zum gemeinsamen Button-Vertrag. */
.cs-button.cs-icon-button {
	width: var(--cs-icon-button-size-md);
	height: var(--cs-icon-button-size-md);
}

/* Zentrale Symbole für Icon-Buttons (Editor-Standard): <button class="cs-button cs-icon-button" data-cs-icon="edit"
   title="…" aria-label="…">. Nur selbsterklärende Aktionen; die Beschriftung steht im Tooltip und für Screenreader. */
.cs-button.cs-icon-button[data-cs-icon] {
	padding: 0;
	min-height: 0;
	font-size: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.125rem;
	list-style: none;
	&::-webkit-details-marker {
		display: none;
	}
}

/* Symbolzuordnung unabhängig von der Größe: Verwaltungen mit eigener Button-Größe (z. B. Medienkarten) setzen nur
   data-cs-icon und behalten ihre Maße. */
.cs-button[data-cs-icon="edit"] {
	background-image: var(--default-icon-edit);
}

.cs-button[data-cs-icon="add"] {
	background-image: var(--default-icon-add);
}

.cs-button[data-cs-icon="delete"] {
	background-image: var(--default-icon-delete);
}

.cs-button[data-cs-icon="replace"] {
	background-image: var(--default-icon-replace);
}

.cs-button[data-cs-icon="retry"] {
	background-image: var(--default-icon-retry);
}

.cs-button[data-cs-icon="up"] {
	background-image: var(--default-icon-up);
}

.cs-button[data-cs-icon="down"] {
	background-image: var(--default-icon-down);
}

.cs-button[data-cs-icon="pin"] {
	background-image: var(--default-icon-pin);
	&[aria-pressed="true"] {
		background-image: var(--default-icon-pin-active);
	}
}

/* Umschalt-Icon-Buttons (aria-pressed): aktiver Zustand einheitlich hervorgehoben. */
.cs-button.cs-icon-button[aria-pressed="true"] {
	border-color: var(--cs-color-primary);
	background-color: var(--cs-color-primary-tint);
}

.cs-button.cs-button-icon {
	position: relative;
	overflow: hidden;
	padding-left: 40px !important;
}

.cs-button.cs-button-icon::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	background-color: rgba(0, 0, 0, .05);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px;
	content: "";
}

.cs-button.cs-button-icon.cs-button-prev::before {
	background-image: var(--default-icon-prev);
}

.cs-button.cs-button-icon.cs-button-next::before {
	background-image: var(--default-icon-next);
}

/* Gemeinsame Varianten, die Extensions bereits verwenden (small/link/text). */
.cs-button.cs-button--small {
	min-height: var(--cs-control-height-sm);
	padding: 0 var(--cs-control-padding-x-sm);
	font-size: var(--cs-font-size-xs, .75rem);
}

.cs-button.cs-button--link,
.cs-button.cs-button--text {
	min-height: 0;
	padding: 0;
	border-color: transparent;
	background: none;
	color: var(--cs-color-primary);
}

.cs-button.cs-button--link {
	font-weight: normal;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cs-button.cs-button--link:hover,
.cs-button.cs-button--text:hover {
	border-color: transparent;
	background: none;
	text-decoration: underline;
}

/* Hinweisboxen (Fehler, Erfolg, Warnung, Info) – Editor und Website-Bausteine. */
.cs-admin-alert {
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border-soft);
	border-radius: var(--cs-radius-md);
	&.cs-admin-alert--error {
		border-color: #fecaca;
		background: var(--cs-color-danger-soft);
		color: #991b1b;
	}

	&.cs-admin-alert--success {
		border-color: #bbf7d0;
		background: var(--cs-color-success-soft);
		color: #166534;
	}

	&.cs-admin-alert--warning {
		border-color: #fde68a;
		background: var(--cs-color-warning-soft);
		color: var(--cs-color-warning-text);
	}

	&.cs-admin-alert--info {
		border-color: var(--cs-color-primary-soft);
		background: var(--cs-color-primary-tint);
		color: var(--cs-color-text);
	}
}

/* Minimaler gemeinsamer Formularaufbau */

.cs-admin-form {
	margin: 0;
}

.cs-admin-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cs-space-3);
}

.cs-admin-field {
	display: grid;
	gap: .45rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cs-admin-field--full {
	grid-column: 1 / -1;
}

.cs-admin-field input,
.cs-admin-field textarea,
.cs-admin-field select {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.cs-admin-field__label {
	color: var(--cs-color-text-strong);
	font-size: var(--cs-font-size-sm, .8125rem);
	font-weight: bold;
}

.cs-admin-field__hint {
	color: var(--cs-color-text-soft);
	font-size: var(--cs-font-size-xs, .75rem);
	line-height: 1.45;
}

@media (max-width: 48rem) {
	.cs-admin-form-grid {
		grid-template-columns: 1fr;
	}

	.cs-admin-field--full {
		grid-column: auto;
	}
}