.day-night-container {
	--text-color: var(--black);
	--bg-color: var(--white);

	position: relative;
	padding: 35px 0 49px;
	margin-bottom: var(--widget-margin-bottom);
	text-align: center;
	background-color: var(--bg-color);
	transition: background-color var(--transition-appendix);

	.container-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: 0 var(--space-8);
		margin-bottom: 14px;
	}

	.container-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-3xl);
		line-height: 1.1;
		letter-spacing: -0.1em;
		color: var(--text-color);
		transition: color var(--transition-appendix);
	}

	.day-night-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.toggle-label {
		display: block;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: 0.675rem;
		line-height: 1.1;
		text-transform: uppercase;
		color: var(--text-color);
		opacity: 0.5;
		transition:
			color var(--transition-appendix),
			opacity var(--transition-appendix);
	}

	.day-night-button {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 4.1625rem;
		padding: 0.5rem 0.5625rem;
		margin: 0;
		line-height: 1.1;
		font-size: var(--text-xs);
		background: var(--white);
		border: 1px solid var(--black);
		border-radius: var(--rounded-full);

		&::before {
			position: absolute;
			inset: 50% auto auto 0.225rem;
			z-index: -1;
			translate: 0 -50%;
			display: block;
			width: 1.4625rem;
			aspect-ratio: 1;
			content: '';
			background: var(--black);
			border-radius: var(--rounded-circle);
			pointer-events: none;
			transition: translate var(--transition-appendix);
		}
	}

	.button-icon {
		color: rgba(0, 0, 0, 0.5);
		transition: color var(--transition-appendix);
	}	
	
	.slideshow {
		display: none;
		
		&,
		&.in {
			opacity: 0;
		}

		&.active,
		&.in,
		&.out {
			display: block;
		}

		&.active,
		&.out {
			opacity: 1;
		}

		&.in {
			animation: fade-in 0.3s ease forwards;
		}

		&.out {
			animation: fade-out 0.3s ease forwards;
		}

		&:not(.active),
		&:not(.active) * {
			pointer-events: none;
		}
	}

	/*----- day/night active -----*/

	&.night-active {
		--text-color: var(--white);
		--bg-color: var(--blue-dark);

		.day-night-button::before {
			translate: 2.1rem -50%;
		}
	}
	
	&.day-active .toggle-label.day,
	&.night-active .toggle-label.night {
		opacity: 1;
	}
	
	&.day-active .button-icon.day,
	&.night-active .button-icon.night {
		color: var(--white);
	}

	/*----- media queries -----*/

	@media (min-width: 64em) {
		.container-header {
			gap: 14px;
			margin-bottom: 6px;
		}

		.container-title {
			font-size: 2.5rem;
		}
	}
}