/* Establishes the positioned container for the custom top bar. */
.wp-block-cuwl1-top-bar.cuwl1-top-bar {
	min-height: 35px;
	position: relative;
}

/* Draws the colored rounded background behind the top bar. */
.wp-block-cuwl1-top-bar.cuwl1-top-bar::before {
	background-color: var(--wp--preset--color--top-bar, #00c6df);
	border-radius: 10px;
	content: "";
	height: 35px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	z-index: 0;
}

/* Places top bar content above its decorative background. */
.cuwl1-top-bar-content {
	align-content: center;
	display: grid;
	min-height: 35px;
	position: relative;
	z-index: 1;
}

/* Prevents top bar buttons from stretching. */
.wp-block-cuwl1-top-bar .wp-block-button {
	flex: 0 0 auto;
	width: max-content;
}

/* Styles top bar button links with the themed image background. */
.wp-block-cuwl1-top-bar .wp-block-button__link {
	align-items: center;
	background-color: transparent;
	background-image: url("../../assets/images/ui/top-bar-button-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 0;
	box-sizing: border-box;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	height: 45px;
	justify-content: center;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	transition: filter 150ms ease;
	white-space: nowrap;
	width: max-content;
}

/* Brightens top bar button links when they receive pointer or keyboard focus. */
.wp-block-cuwl1-top-bar .wp-block-button__link:hover,
.wp-block-cuwl1-top-bar .wp-block-button__link:focus-visible {
	filter: brightness(1.12);
}