@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;
@use "../utils/theme-variables" as *;

.components-snackbar {
	font-family: $default-font;
	font-size: $default-font-size;
	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
	backdrop-filter: blur($grid-unit-20) saturate(180%);
	border-radius: $radius-medium;
	box-shadow: $elevation-small;
	color: $white;
	padding: $grid-unit-15 ($grid-unit-05 * 5);
	width: 100%;
	max-width: var(--wpds-dimension-surface-width-lg);
	box-sizing: border-box;
	cursor: var(--wpds-cursor-control);

	// Re-enable pointer events, which are disabled by the
	// .components-snackbar-list styles.
	pointer-events: auto;

	@include break-small() {
		width: fit-content;
	}

	&:focus {
		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
	}

	&.components-snackbar-explicit-dismiss {
		cursor: default;
	}

	.components-snackbar__content-with-icon {
		position: relative;
		padding-left: $icon-size;
	}

	.components-snackbar__icon {
		position: absolute;
		left: $grid-unit-10 * -1;
		top: calc((#{$icon-size - ($default-font-size * $default-line-height)}) / -2);
	}

	.components-snackbar__dismiss-button {
		margin-left: $grid-unit-30;
		cursor: var(--wpds-cursor-control);
	}
}

.components-snackbar__action.components-button,
.components-snackbar__action.components-external-link {
	margin-left: $grid-unit-40;
	color: $white;
	flex-shrink: 0;

	&:focus {
		box-shadow: none;
		outline: 1px dotted $white;
	}

	&:hover {
		text-decoration: none;
		color: currentColor;
	}
}

.components-snackbar__content {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	line-height: $default-line-height;
}

.components-snackbar-list {
	position: absolute;
	z-index: z-index(".components-snackbar-list");
	width: 100%;
	box-sizing: border-box;

	// Disable pointer events, so that clicking this area
	// outside of an individual notice still allows the UI
	// underneath to be clicked.
	pointer-events: none;
}

.components-snackbar-list__notice-container {
	position: relative;
	padding-top: $grid-unit-10;
}