.brand__logo {
	@media all and (max-width: 1023px) {
		margin: var(--space-l-2xl) 0;
	}
}

.brand__logo__img {
	height: 100%;
	min-height: calc(310px + 5vw);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius) var(--border-radius) 0 0;

	&[data-brand-theme="light"] {
		background-color: var(--color-neutral-100);
	}

	&[data-brand-theme="brand"] {
		background-color: var(--color-brand);
	}

	&[data-brand-theme="dark"] {
		background-color: var(--color-neutral-900);
	}
}

.brand__logo__colors {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 1rem;
	color: var(--color-neutral-900);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.brand__logo__colors__btn {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	flex: none;
	margin-left: 0.75rem;
	margin-inline-start: 0.75rem;
	background-color: var(--background-color);
	border-radius: 50%;
	position: relative;

	&::before {
		content: attr(data-brand-theme);
		position: absolute;
		top: calc(100% + 0.25rem);
		left: 0;
		offset-block-start: calc(100% + 0.25rem);
		offset-inline-start: 0;
		transform: translateX(-1rem);
		box-shadow:
			0 4px 8px -2px rgba(16, 24, 40, 0.1),
			0 4px 6px -2px rgba(16, 24, 40, 0.05);
		display: none;
		background-color: var(--lightest-background-color);
		color: var(--headings-color);
		border-radius: 0.25rem;
		padding: 0.25rem 0.75rem;
	}

	&:hover {
		&::before {
			display: block;
		}
	}

	&:focus-visible {
		&::before {
			display: block;
		}
	}

	&.focus-visible {
		&::before {
			display: block;
		}
	}
}
