$browser-margins:20px;
$browser-margins-width-button:20px;
$button-bg-color: white;
$border-radius: 50px;
$text-color: #555D67;
div[data-component="cookie-notice"] {
	transition: all 0.8s $easeInOutBack;
	position: absolute;
	bottom: $browser-margins;
	right: $browser-margins;
	background-color: $button-bg-color;
	border-radius: $border-radius;
	z-index: 9;
	min-height: 60px;
	padding: 5px 10px;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	box-shadow: 0 7px 14px rgba(50,50,93,.05), 0 3px 6px rgba(0,0,0,.08);

	&.-not-alone {
		right: $browser-margins + 60px + 10px;
	}

	&.-leave {
		bottom: -100px;
	}

	p {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 14px;
		color: $text-color;
		padding: 0 30px 0 20px;
		margin: 0;
	}

	button {
		transition: all 0.8s $easeOutQuart;
		background-color: rgba(black, 0.1);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 14px;
		border-radius: $border-radius;
		padding: 12px 25px;
		text-decoration: none;
		color: $text-color;
		font-weight: 500;
		border:none;
		cursor: pointer;
		outline: none;

		/* ---- hover ---- */

		&:hover {
			background-color: rgba(black, 0.18);
		}
	}

}