@import url('../styles/margins.css');
@import url('../styles/flex.css');

:host {
	all: initial;
}

#posten-bring-checkout {

	font-family: 'Posten Sans', Arial, sans-serif;
	font-weight: 400;
	color: #000000;

	a, p {
		margin: 0;
		padding: 0;
		line-height: 1.4;
	}

	.text-0\.875r {
		font-size: .875em;
	}

	.text-0\.75r {
		font-size: .75em;
	}

	.text-1r {
		font-size: 1em;
	}

	.logo {
		width: 82px;
	}

	.leadtime {
		font-size: 1em;
	}

	.service_description {
		font-size: .875em;
	}

	.pp_name {
		font-size: 1.1em;
		line-height: 27px;
	}

	.dot {
		color: #E32D22;
	}

	.pp_details {
		border-left: 2px solid #4a1011;
		padding-left: 9px;
		font-size: .875em;
		color: #4a1011;
	}

	.environmental {
		img {
			height: 33px;
		}
	}

	.button__plain {
		border: 0;
		background: none;
		color: #4a1011;
		cursor: pointer;
		text-decoration: underline;
	}

	.button__plain:hover, .button__plain:focus-visible {
		color: #E32D22;
		text-decoration-color: #E32D22;
	}

	.radio {
		padding: 0 0 0 calc(16 + 8) + 12px;
		border-radius: 2px;
		user-select: none;
		display: block;
		position: relative;
		cursor: pointer;
		--checkmark-width: 16px;
		--checkmark-margin: 4px;

		label:focus {
			cursor: pointer;
		}
	}

	.radio__checkmark {
		appearance: none;
		background: #FFFFFF;
		display: inline-block;
		margin: 4px;
		height: 20px;
		width: 20px;
		border: solid 2px #4a1011;
		border-radius: 50%;
		position: absolute;
		left: 0;
	}

	.radio__checkmark:focus {
		outline: 1px solid #252525;
		outline-offset: 2px;
	}

	.radio__checkmark:checked::before {
		content: "";
		display: block;
		background: #980000;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		position: absolute;
		top: 3px;
		left: 3px;
	}

	.card {
		padding: 42px;
		border-radius: 5px;
		background-color: #F2F2F2;
	}

	.service-name {
		font-size: 1.4em;
		line-height: 30px;
	}

	.alt_box {
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 1px 1px 0 #e4e4e4;
		width: 83px;
		height: 85px;
		padding: 8px;
		text-align: center;

		.radio__checkmark {
			border: solid 2px #4a1011;
			left: 36px;
		}
	}

	@media screen and (max-width: 500px) {
		.card {
			padding: 22px;
		}

		.service-name {
			font-size: 1.1em;
			line-height: 22px;
		}

		.logo {
			width: 70px;
		}
	}
}

#posten-bring-checkout.bring {
	.radio__checkmark {
		border-color: #002F19;
	}

	.radio__checkmark:focus {
		outline: 1px solid #002F19;
	}

	.radio__checkmark:checked::before {
		background: #00643A;
	}

	.button__plain:hover, .button__plain:focus-visible {
		color: #00643A;
		text-decoration-color: #00643A;
	}

	.pp_details {
		border-color: #002F19;
		color: #002F19;
	}

	.dot {
		color: #7BC144;
	}

	.logo {
		width: 70px;
	}

	.button__plain {
		color: #002F19;
	}
}

#posten-bring-checkout.dark, #posten-bring-checkout.bring.dark {

	.card {
		background-color: #252525;
	}

	.pp_details {
		border-color: #FFFFFF;
		color: #B4B4B4;
	}

	.pp_name {
		color: #FFFFFF;
	}

	color: #B4B4B4;

	.radio__checkmark {
		border-color: #999999;
	}

	.radio__checkmark:focus {
		outline: 1px solid #999999;
	}

	.radio__checkmark:checked::before {
		background-color: #252525;
	}

	.button__plain {
		color: #999999;
	}

	.button__plain:hover, .button__plain:focus-visible {
		color: #FFFFFF;
		text-decoration-color: #FFFFFF;
	}

	.alt_box {

		background-color: #333333;
		box-shadow: 1px 1px 0 #121212;

		.text-1r {
			color: #FFFFFF;
		}

		.radio__checkmark {
			border-color: #999999;
		}
	}
}
