// ============================================================================
// :: COOKIE BAR
// ============================================================================
.o-cookie-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: $z-index-highest;

	width: 100vw;
	padding: 2rem 0;

	opacity: 0;

	background-color: $primary-color;

	transform: translateY(100%);

	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

	pointer-events: none;

	@include respond-at($screen-small-base) {
		top: unset;
		bottom: 0;

		padding: 2.8rem 8rem;

		transform: translateY(100%);
	}

	.l-container {
		@include respond-at($screen-small-base) {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}

// ============================================================================
// :: ELEMENTS
// ============================================================================
.o-cookie-bar__text {
	font-weight: $font-weight-normal;
	hyphens: auto;

	color: $text-color-white;

	@include respond-at($screen-small-base) {
		width: 60%;
	}
}

.o-cookie-bar__button {
	margin-top: 2rem;

	@include respond-at($screen-small-base) {
		margin-top: 0;
	}
}

// ============================================================================
// :: STATES
// ============================================================================
.o-cookie-bar {

	&.is-open {
		opacity: 1;

		transform: translateY(0);

		pointer-events: auto;
	}
}