@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/functions' as *;

.logo-container {
	width: 100%;
	min-height: 2rem;
	position: relative;

	img,
	svg {
		object-fit: contain;
		object-position: left;
	}

	&.centered {
		img,
		svg {
			object-position: center;
		}
	}

	// Show the dark version of the logo by default (brand is dark mode)
	.logo-default {
		display: none;
	}

	.logo-dark {
		display: initial;
	}

	// When no dark logo variant exists, add glass treatment and show default
	&:not(:has(.logo-dark)) {
		border-width: 0.125rem;
		border-style: solid;
		border-radius: var(--radius-small);
		backdrop-filter: blur(1.5rem);
		border-color: with-opacity(var(--default), 70);
		background-color: with-opacity(var(--default), 80);

		.logo-default {
			padding: var(--padding-slim);
			display: initial;
		}
	}
}