@import "notices";

$sensei-notice-icon-height: 30px;
$sensei-notice-icon-width: 30px;

/* Sensei Notice */
.sensei-notice {
	@import '../shared/styles/wp-admin';

	border-left-color: $primary;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 40px;
	padding: 18px 24px;

	@media ( min-width: 961px ) {
		flex-direction: row;
		align-items: center;
	}

	&__content {
		flex: 1;
		display: flex;
		gap: 18px;
		align-items: center;
		color: #101517;
		font-size: 14px;

		a {
			color: #000;
		}
	}

	&__icon {
		color: #26212E;
		flex: 0 0 auto;
		margin-top: 0;
		width: $sensei-notice-icon-width;
		height: $sensei-notice-icon-height;
	}

	&__heading {
		margin-bottom: 5px;
		font-weight: bold;
	}

	&__actions {
		white-space: nowrap;

		.button {
			padding: 3px 12px;

			&:not(:first-child) {
				margin-left: 18px;
			}
		}
	}

	.button-secondary {
		color: #155E65;
		border-color: #43AF99;
	}

	.notice-dismiss {
		top: 50%;
		transform: translateY(-50%);
	}

	&--error {
		border-left-color: $notice-error;
	}

	&--warning {
		border-left-color: $notice-warning;
	}

	&--info {
		border-left-color: $notice-info;
	}

	&--success {
		border-left-color: $notice-success;
	}
}
