@use "@gloria/layout/_mixins.scss" as *;

.c-header-bar {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: var(--spacing-4);
	padding: var(--spacing-2) var(--spacing-4);
	font-size: var(--font-size-sm);

	--a11y-focus-ring-color: color-mix(in srgb, var(--color-common-white) 40%, transparent);
	--a11y-focus-border-color: var(--color-common-white);

	&--warning {
		--a11y-focus-ring-color: color-mix(in srgb, var(--color-warning-500) 40%, transparent);
		--a11y-focus-border-color: var(--color-slate);

		background-color: var(--color-warning-light);
		color: var(--color-slate);
	}

	&--info {
		background-color: var(--color-info);
		color: var(--color-common-white);
	}

	&--info-gradient {
		background: linear-gradient(240deg, var(--color-info-800), var(--color-info-500));
		color: var(--color-common-white);

		.b-prose a,
		.b-link {
			color: var(--color-common-white);
		}
	}

	@include mobile {
		gap: var(--spacing-2);
		justify-content: flex-start;
		overflow-x: scroll;

		&--closeable {
			padding-right: 60px;
		}
	}

	&__close {
		position: absolute;
		top: 0;
		right: var(--spacing-1);
		height: 100%;
	}
}
