@use './tokens' as *;

// Figma Alert / error confirm dialog (Frame 30).
.flow-confirm-dialog {
	position: fixed;
	inset: 0;
	z-index: 1000003;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.flow-confirm-dialog__backdrop {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba( 0, 0, 0, 0.45 );
	cursor: default;
}

.flow-confirm-dialog__panel {
	position: relative;
	width: 100%;
	max-width: min( 420px, calc( 100% - 32px ) );
	font-family: $font-stack;
	font-size: $font-size-base;
	line-height: $line-height-base;
	color: $badge-changes-text;
	background: $badge-changes-bg;
	border: 1px solid $badge-changes-border;
	border-left-width: 4px;
	border-left-color: $badge-changes-text;
	border-radius: $radius-sm;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.16 );
}

.flow-confirm-dialog__alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
}

.flow-confirm-dialog__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: $badge-changes-text;

	svg {
		display: block;
		width: 24px;
		height: 24px;
	}
}

.flow-confirm-dialog__content {
	flex: 1 1 auto;
	min-width: 0;
}

.flow-confirm-dialog__title {
	margin: 0 0 2px;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: inherit;
}

.flow-confirm-dialog__message {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: inherit;
}

.flow-confirm-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 0 16px 12px;
}

.flow-confirm-dialog__confirm.components-button {
	min-width: 80px;
	justify-content: center;
	background: $badge-changes-text !important;
	border: 1px solid $badge-changes-text !important;
	color: #fff !important;
	box-shadow: none !important;

	&:hover:not(:disabled),
	&:active:not(:disabled) {
		background: #b32d2e !important;
		border-color: #b32d2e !important;
		color: #fff !important;
	}

	&:focus:not(:disabled) {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff,
			0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px)
				$badge-changes-text !important;
		outline: 1px solid transparent;
	}
}
