@use '../../admin-ui/styles/mixins' as admin;
@use 'variables' as *;

// Settings panel header (title, Back in nested screens) and exit rows, on
// admin-ui tokens (canvas "1 · Editor" panel). They render inside an admin-ui
// scope: the sidebar's, or the header's own in a modal.
.modula-settings-panel__header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	flex: 0 0 auto;
	padding: 20px $mod-se-gut 14px;
	border-bottom: 1px solid var(--modula-admin-border);
	background: transparent;
}

.modula-settings-panel__back {
	@include admin.button-reset;
	@include admin.control-label;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	max-width: 100%;
	min-height: 32px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;

	&:hover {
		color: var(--modula-admin-ink);
	}
}

.modula-settings-panel__back-icon {
	display: block;
	flex: 0 0 auto;
}

.modula-settings-panel__back-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modula-settings-panel__title {
	margin: 0;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-title);
	font-weight: 400;
	line-height: 1.25;
	text-align: left;
}

// Item edit header (canvas "Edit image"): no rule under it, the cards follow.
.modula-settings-panel__header--item {
	border-bottom: none;
}

.modula-settings-panel__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: $mod-space-12;
	min-width: 0;
}

.modula-settings-panel__pager-arrows {
	display: flex;
	flex: 0 0 auto;
	gap: $mod-space-4;
}

.modula-settings-panel__pager-arrow {
	@include admin.button-reset;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid var(--modula-admin-border);
	border-radius: var(--modula-admin-radius-sm);
	color: var(--modula-admin-ink);
	transition: background var(--modula-admin-transition) ease;

	// As the canvas's `hf-tb`: only the arrow fades; the border stays.
	&:disabled {
		cursor: default;
		color: var(--modula-admin-ink-disabled);
	}

	&:hover:not(:disabled) {
		background: var(--modula-admin-surface-hover-soft);
	}

	svg {
		display: block;
	}
}

.modula-settings-panel__desc {
	margin: -6px 0 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-help);
	font-weight: 400;
	line-height: 1.45;
}