@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$banner-background: tokens.$info-background !default;
$banner-padding: tokens.$spacer-5 !default;

$banner-font-size: tokens.$font-size-7 !default;
$banner-color: tokens.$info-dark !default;

$banner-border-color: tokens.$border-white-high-contrast !default;
$banner-border-width: tokens.$border-width !default;

$banner-dismiss-margin: tokens.$spacer-2 !default;

.banner {
	@extend %layout-gap;

	display: grid;
	position: relative;
	grid-template: auto / 1fr auto;
	grid-template-areas: 'banner-content dismiss';
	outline-color: tokens.$text;
	background-color: $banner-background;
	color: $banner-color;
	font-size: $banner-font-size;
	line-height: tokens.$line-height-normal;
	padding-block: $banner-padding;
	word-wrap: break-word;
	word-break: break-word;
	border-block: $banner-border-width solid $banner-border-color;

	&.is-loading {
		color: transparent;

		> :first-child {
			margin-inline-start: calc($banner-padding + 0.375em);
		}

		&::before {
			@include mixins.loader;

			position: absolute;
			inset-block-start: $banner-padding;
			inset-inline-start: tokens.$layout-gap;
			border-color: transparent transparent $banner-color $banner-color;

			@include mixins.widescreen {
				inset-inline-start: tokens.$layout-widescreen-gap;
			}
		}
	}

	.banner-content {
		grid-area: banner-content;

		a:not(.button) {
			color: currentColor;
			font-weight: tokens.$weight-semibold;
			text-decoration: underline;

			.theme-high-contrast & {
				color: tokens.$hyperlink;
			}

			&:hover {
				text-decoration-thickness: 0.15em;
			}
		}
	}

	.banner-dismiss {
		@include mixins.dismiss-square;

		grid-area: dismiss;
		margin-inline-start: $banner-dismiss-margin;
	}
}