/**
 * "Language · Ako" panel (block editor sidebar and classic metabox).
 */
@import "../components/components.css";

.ako-lp {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-md);
}

.ako-lp__head {
	display: flex;
	justify-content: space-between;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-label);
}

.ako-lp__head > span:last-child {
	color: var(--ako-admin-text-tertiary);
	font: var(--ako-text-help);
}

.ako-ml .ako-lp__note {
	display: flex;
	gap: var(--ako-admin-space-sm);
	margin: 0;
	padding: var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
	font: var(--ako-text-help);
}

.ako-lp__note .ako-icon {
	flex: none;
	margin-block-start: var(--ako-admin-space-3xs);
}

.ako-lp__note.is-info {
	background: var(--ako-admin-bg-info-subtle);
	color: var(--ako-admin-text-info);
}

.ako-lp__note.is-error {
	background: var(--ako-admin-bg-danger-subtle);
	color: var(--ako-admin-text-danger);
}

.ako-lp-card {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-sm);
	padding: var(--ako-admin-space-md);
	border: var(--ako-admin-border-width) solid var(--ako-admin-border-default);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-surface);
}

.ako-lp-card.is-dashed {
	border-style: dashed;
}

.ako-lp-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ako-admin-space-sm);
}

.ako-ml .ako-lp-card__title {
	margin: 0;
	overflow: hidden;
	font: var(--ako-text-body-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ako-ml .ako-lp-card__note {
	margin: 0;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-lp-card__actions {
	display: flex;
	gap: var(--ako-admin-space-2xs);
}

.ako-lp-card > .ako-button {
	inline-size: 100%;
}

.ako-ml .ako-lp-results {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ako-lp-results .ako-menu__item {
	padding: var(--ako-admin-space-xs) var(--ako-admin-space-sm);
}

.ako-lp-results__empty {
	padding: var(--ako-admin-space-xs) var(--ako-admin-space-sm);
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-help);
}

.ako-lp .ako-link {
	align-self: flex-start;
}

.ako-lp-hreflang {
	display: flex;
	flex-direction: column;
	gap: var(--ako-admin-space-2xs);
	padding: var(--ako-admin-space-md);
	border-radius: var(--ako-admin-radius-control);
	background: var(--ako-admin-bg-subtle);
}

.ako-ml .ako-lp-hreflang__title {
	display: flex;
	align-items: center;
	gap: var(--ako-admin-space-xs);
	margin: 0;
	font: var(--ako-text-label);
}

.ako-lp-hreflang__title .ako-icon {
	color: var(--ako-admin-icon-success);
}

.ako-ml .ako-lp-hreflang code {
	padding: 0;
	background: none;
	color: var(--ako-admin-text-secondary);
	font: var(--ako-text-code);
}

/* Indeterminate progress while a draft is created. */
.ako-progress.is-indeterminate .ako-progress__value {
	inline-size: 40%;
}

@media (prefers-reduced-motion: no-preference) {

	.ako-progress.is-indeterminate .ako-progress__value {
		animation: ako-indeterminate 1.2s ease-in-out infinite;
	}
}

@keyframes ako-indeterminate {

	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(250%);
	}
}

/* Classic metabox: tokens live on .ako-ml, so the panel owns padding. */
#akoml-language .inside {
	margin: 0;
	padding: 0;
}

#akoml-classic .ako-lp {
	padding: var(--ako-admin-space-md);
}