@charset "UTF-8";

section#cookies {
	--shadow: 4px 4px 10px 0px rgb(0 0 0 / 45%);
	z-index: var(--cookies-z-index, 6000);
	right: var(--cookies-right, 2rem);
	bottom: var(--cookies-bottom, 2rem);
	position: fixed;
	width: var(--cookies-width, 400px);
	height: var(--cookies-height, 40px);
	/* padding: 0.8rem 1.2rem 0.7rem; */
	font-family: "Bahnschrift";
	color: #fff;
	transition: opacity 0.1s ease-out;

	:is(> label[for="cookies"]:focus) {
		opacity: 0;
	}

	+ div.cookies.background {
		z-index: calc(var(--cookies-z-index, 6000) - 1);
		right: var(--cookies-right, 2rem);
		bottom: var(--cookies-bottom, 2rem);
		position: fixed;
		width: var(--cookies-width, 400px);
		height: var(--cookies-height, 40px);
		border: 1px solid #a8a8a847;
		border-right: unset;
		border-bottom: unset;
		border-radius: 0.75rem;
		background-color: #33323691;
		backdrop-filter: blur(3px);
		mix-blend-mode: screen;
		box-shadow: var(--shadow);
		-webkit-box-shadow: var(--shadow);
		-moz-box-shadow: var(--shadow);
	}

	> div {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		> p {
			margin: unset;
			font-size: 1rem;
		}

		> small {
			font-size: 0.8rem;
			font-weight: 200;
			color: #a6a69d;
		}
	}

	> label {
		right: -20px;
		top: -20px;
		position: absolute;
		padding: unset;
		padding-right: 0.1em;
		cursor: pointer;
		border: unset;
		color: #f00;
		background: unset;
	}
}
