@use "../mixins" as *;

.info-bar {
	@include flex($align: center);
	position: relative;
	min-block-size: 48px;
	padding-inline-start: 15px;
	box-sizing: border-box;
	user-select: none;
	background-clip: padding-box;
	font-family: var(--font-family-text);
	border: 1px solid var(--card-stroke-default);
	border-radius: var(--control-corner-radius);
	&.severity- {
		&information {
			background-color: var(--card-background-secondary);
		}
		&success {
			background-color: var(--system-background-success);
		}
		&caution {
			background-color: var(--system-background-caution);
		}
		&critical {
			background-color: var(--system-background-critical);
		}
		&attention {
			background-color: var(--system-background-attention);
		}
	}
	&-icon {
		align-self: flex-start;
		display: flex;
		flex: 0 0 auto;
		margin: {
			block-start: 16px;
		}
	}
	&-content {
		@include flex($align: center, $wrap: true);
		position: relative;
		box-sizing: border-box;
		flex: 1 1 auto;
		margin: {
			inline-start: 13px;
			block-start: 7px;
			block-end: 7px;
		}
		&.message-wrapped,
		&.action-wrapped {
			margin: {
				block-start: 13px;
				block-end: 15px;
			}
		}
		&.message-wrapped {
			h5,
			p {
				align-self: flex-start;
			}
			.info-bar-action {
				margin-inline-end: 50%;
			}
		}
		&.action-wrapped .info-bar-action {
			padding-block-start: 16px;
		}
	}
	h5,
	p {
		color: var(--text-primary);
		margin: 0;
		line-height: 20px;
		font: {
			size: var(--body-font-size);
			weight: 400;
		}
	}
	h5 {
		font-weight: 600;
		margin-inline-end: 12px;
	}
	p {
		flex: 1 1 auto;
		margin-inline-end: 15px;
	}
	&-action {
		@include flex($align: center);
		align-self: flex-start;
		margin-inline-end: 4px;
	}
	&-close-button {
		@include flex($align: center, $justify: center);
		align-self: flex-start;
		flex: 0 0 auto;
		border: none;
		outline: none;
		appearance: none;
		inline-size: 38px;
		block-size: 38px;
		margin: 4px;
		color: var(--text-primary);
		border-radius: var(--control-corner-radius);
		background-color: var(--subtle-fill-transparent);
		transition: var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
		&:focus-visible {
			box-shadow: var(--focus-stroke);
		}
		&:hover {
			background-color: var(--subtle-fill-secondary);
		}
		&:active {
			color: var(--text-secondary);
			background-color: var(--subtle-fill-tertiary);
		}
		svg {
			inline-size: 12px;
			block-size: 12px;
			fill: currentColor;
		}
	}
}