.components-snackbar {
	font-family: $default-font;
	font-size: $default-font-size;
	background-color: $gray-900;
	border-radius: $radius-block-ui;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	color: $white;
	padding: 16px 24px;
	width: 100%;
	max-width: 600px;
	box-sizing: border-box;
	cursor: pointer;

	// 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:
			0 0 0 1px $white,
			0 0 0 3px var(--gc-admin-theme-color);
	}

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

	.components-snackbar__content-with-icon {
		margin-left: 24px;
	}

	.components-snackbar__icon {
		position: absolute;
		top: 24px;
		left: 28px;
	}

	.components-snackbar__dismiss-button {
		margin-left: 32px;
		cursor: pointer;
	}
}

.components-snackbar__action.components-button {
	margin-left: $grid-unit-40;
	color: $white;
	height: auto;
	flex-shrink: 0;
	line-height: $default-line-height;
	padding: 0;

	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) {
		text-decoration: underline;
		background-color: transparent;

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

		&:hover {
			color: var(--gc-admin-theme-color);
		}
	}
}

.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: 8px;
}