@use '../../base/links' as *;
@use '../../base/mixins/glass' as glass;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/breakpoints' as break;

.announcement {
	&-bar {
		border: 1px solid;
		border-radius: var(--radius-small);
		cursor: pointer;
		display: inline-block;
		align-items: center;
		gap: var(--padding-extra-small);
		max-width: max-content;
		padding: 0.5rem 1.5rem;
		position: relative;
		transition: var(--transition-fast);
		background-color: var(--default);
		border-color: var(--ui-fill);

		.badge {
			margin-right: var(--padding-extra-small);
		}

		&:hover,
		&:focus {
			background-color: var(--ui-fill);
		}

		&.rsa {
			--rsa-theme-border: rgb(164 214 94 / 50%);
			--rsa-theme-background: rgb(164 214 94 / 10%);
			--rsa-theme-text: rgb(164 214 94 / 100%);

			border-color: var(--rsa-theme-border);

			.announcement-link {
				color: var(--rsa-theme-text);

				&::after {
					color: var(--rsa-theme-text);
				}
			}

			@include break.min-mobile {
				background-color: var(--rsa-theme-background);
			}
		}
	}

	&-message {
		@include font.get-typography(body-bold);

		color: var(--ui-headline);
	}

	&-link {
		@extend .link-stretched;
		@include font.get-typography(body-bold);

		color: var(--ui-stroke);

		&::after {
			color: var(--ui-stroke);
		}

		&:hover,
		&:focus {
			text-decoration: none;
			transition: var(--transition-fast);
			color: var(--action);

			&::after {
				color: var(--action);
			}
		}
	}

	&-banner {
		width: 100%;
		padding: var(--padding-extra-large);
		position: relative;
		display: flex;
		gap: var(--padding-huge);
		border-width: 2px;
		border-style: solid;
		border-radius: var(--radius-large);
		box-shadow: var(--shadow-outline);
		background-color: var(--ui-fill);

		// Decide if we want to add a distinct border
		border-color: var(--ui-fill);

		@include break.max-mobile {
			padding: var(--padding-small);
			gap: var(--padding-large);
			flex-wrap: wrap;
			text-align: center;
		}
	}
}