.title-highlight__layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.title-highlight {
	position: absolute;
	box-sizing: border-box;
	height: 4.4375rem;
	pointer-events: none;
}

.title-highlight.--white {
	--title-highlight-bar-bg: var(--color-base-white-20);
	--title-highlight-corner-color: var(--color-base-white);
}

.title-highlight.--blue {
	--title-highlight-bar-bg: var(--color-blue-blue-transparent-20);
	--title-highlight-corner-color: var(--color-blue-blue-800);
}

.title-highlight.--orange {
	--title-highlight-bar-bg: var(--color-orange-orange-700);
	--title-highlight-corner-color: var(--color-base-white);
}

.title-highlight__bar {
	position: absolute;
	left: 0;
	top: 0.75rem;
	width: calc(100% - 0.5rem);
	height: 3.6875rem;
	background-color: var(--title-highlight-bar-bg);
}

.title-highlight__corner {
	position: absolute;
	top: 0;
	width: 0.85825rem;
	height: 4.4375rem;
	color: var(--title-highlight-corner-color);
}

.title-highlight__corner svg {
	display: block;
	width: 100%;
	height: 100%;
}

.title-highlight__corner--start {
	left: -0.25rem;
}

.title-highlight__corner--end {
	top: 0.25rem;
	right: -0.25rem;
	transform: rotate(180deg);
	transform-origin: center center;
}

[data-title-highlight] [data-title-highlight-target] {
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 1023px) {
	.title-highlight__layer {
		display: none;
	}
}