@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;
@use '../molecules/cards/card.scss' as *;
@use '../molecules/cards/card.scss' as *;

.alert {
	@extend .card;

	padding: var(--padding-medium);
	position: relative;
	border-color: var(--info);

	&-body {
		display: flex;
		gap: var(--padding-small);

		@include break.max-mobile {
			flex-direction: column;
		}
	}

	&-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-small);
	}

	// Alternate state colors
	&.alert {
		&-success {
			border-color: var(--success);

			.button.tertiary {
				color: var(--success);
			}
		}

		&-warning {
			border-color: var(--warning);

			.button.tertiary {
				color: var(--warning);
			}
		}

		&-fail {
			border-color: var(--fail);

			.button.tertiary {
				color: var(--fail);
			}
		}

		.button {
			&:hover,
			&:focus {
				color: var(--action);
			}
		}
	}
}