/* Fælles grundstil for alle knapper */

.webko-button {
	display: inline-block;
	padding: var(--bde-button-padding-medium);
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	font-size: var(--preset-id-f7faeeff-7bf0-4aa8-a1a4-c0fbd4abe2f3-font-size);
	line-height: var(--preset-id-f7faeeff-7bf0-4aa8-a1a4-c0fbd4abe2f3-line-height);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	justify-content: center;
}

.webko-button:hover,
.webko-button:focus {
	text-decoration: none;
}

/* --- Primær --- */

.webko-button--primary {
	--bde-transition-duration: 100ms;
	--bde-button-custom-border-color: transparent;
	--bde-button-custom-border-color-hover: transparent;
	--bde-button-custom-text-color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	--bde-button-custom-text-color-hover: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	--bde-button-custom-background-color: var(--bde-palette-color-1-05bc8f1b-e994-46de-916a-49f9fea3d08d);
	--bde-button-custom-background-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283) !important;
	box-shadow: 0px 2px 4px 0px #0000001a;
	background: var(--bde-button-custom-background-color);
	border-color: var(--bde-button-custom-border-color);
	display: inline-flex;
	align-items: center;
	margin-bottom: 10px;
	margin-top: 5px;
}

.webko-button--primary:hover,
.webko-button--primary:focus {
	background: var(--bde-button-custom-background-color-hover);
	border-color: var(--bde-button-custom-border-color-hover);
}

/* --- Sekundær --- */

.webko-button--secondary {
	--bde-transition-duration: 100ms;
	--bde-button-custom-border-color: #B8C3C1;
	--bde-button-custom-border-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-background-color: transparent;
	--bde-button-custom-background-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-text-color: var(--bde-brand-primary-color);
	--bde-button-custom-text-color-hover: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	color: var(--bde-brand-primary-color);
	background: var(--bde-button-custom-background-color);
	border-color: var(--bde-button-custom-border-color);
	border-width: var(--bde-button-border-width);
	border-style: solid;
	margin-bottom: 10px;
	margin-top: 5px;
}

.webko-button--secondary:hover,
.webko-button--secondary:focus {
	background: var(--bde-button-custom-background-color-hover);
	border-color: var(--bde-button-custom-border-color-hover);
	color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283) !important;
	box-shadow: 0px 3px 10px 0px #0000001f;
}

/* --- Outline --- */

.webko-button--outline {
	--bde-transition-duration: 100ms;
	--bde-button-custom-border-color: #B8C3C1;
	--bde-button-custom-border-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-background-color: transparent;
	--bde-button-custom-background-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-text-color: var(--bde-brand-primary-color);
	--bde-button-custom-text-color-hover: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	color: var(--bde-brand-primary-color) !important;
	line-height: var(--preset-id-f7faeeff-7bf0-4aa8-a1a4-c0fbd4abe2f3-line-height);
	background: var(--bde-button-custom-background-color);
	border-color: var(--bde-button-custom-border-color);
	border-width: var(--bde-button-border-width);
	border-style: solid;
	margin-bottom: 10px;
	margin-top: 5px;
}

.webko-button--outline:hover,
.webko-button--outline:focus {
	background: var(--bde-button-custom-background-color-hover);
	border-color: var(--bde-button-custom-border-color-hover);
	color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283) !important;
	box-shadow: 0px 3px 10px 0px #0000001f;
}

/* Booking */

.webko-button--book:after {
	content: "";
	display: block;
	background-color: currentColor;
	width: 13px;
	height: 13px;
	margin-right: 0px;
	margin-left: 10px;
	mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018.35%2020%22%3E%3Cpath%20d%3D%22M16.82%201.53h-2.29V.77c0-.2-.08-.4-.22-.54a.773.773%200%200%200-1.08%200c-.14.14-.22.34-.22.54v.76H5.37V.77c0-.2-.08-.4-.22-.54a.773.773%200%200%200-1.08%200c-.14.14-.22.34-.22.54v.76H1.53c-.41%200-.79.16-1.08.45S0%202.66%200%203.06v15.29c0%20.41.16.79.45%201.08s.68.45%201.08.45h15.29c.41%200%20.79-.16%201.08-.45s.45-.68.45-1.08V3.06c0-.41-.16-.79-.45-1.08s-.68-.45-1.08-.45m-13%201.53v.76c0%20.2.08.4.22.54a.773.773%200%200%200%201.08%200c.14-.14.22-.34.22-.54v-.76h7.64v.76c0%20.2.08.4.22.54a.773.773%200%200%200%201.08%200c.14-.14.22-.34.22-.54v-.76h2.29v3.06H1.53V3.06zm13%2015.29H1.53V7.64h15.29v10.7Z%22%2F%3E%3C%2Fsvg%3E);
	mask-position: 0 0;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018.35%2020%22%3E%3Cpath%20d%3D%22M16.82%201.53h-2.29V.77c0-.2-.08-.4-.22-.54a.773.773%200%200%200-1.08%200c-.14.14-.22.34-.22.54v.76H5.37V.77c0-.2-.08-.4-.22-.54a.773.773%200%200%200-1.08%200c-.14.14-.22.34-.22.54v.76H1.53c-.41%200-.79.16-1.08.45S0%202.66%200%203.06v15.29c0%20.41.16.79.45%201.08s.68.45%201.08.45h15.29c.41%200%20.79-.16%201.08-.45s.45-.68.45-1.08V3.06c0-.41-.16-.79-.45-1.08s-.68-.45-1.08-.45m-13%201.53v.76c0%20.2.08.4.22.54a.773.773%200%200%200%201.08%200c.14-.14.22-.34.22-.54v-.76h7.64v.76c0%20.2.08.4.22.54a.773.773%200%200%200%201.08%200c.14-.14.22-.34.22-.54v-.76h2.29v3.06H1.53V3.06zm13%2015.29H1.53V7.64h15.29v10.7Z%22%2F%3E%3C%2Fsvg%3E);
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100% 100%;
	transition-timing-function: ease-in-out;
	transition-property: transform, background-color;
	transition-duration: 100ms;
}

/* Mail */

.webko-button--mail {
	--bde-transition-duration: 100ms;
	--bde-button-custom-border-color: #B8C3C1;
	--bde-button-custom-border-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-background-color: transparent;
	--bde-button-custom-background-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-text-color: var(--bde-brand-primary-color);
	--bde-button-custom-text-color-hover: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	color: var(--bde-brand-primary-color) !important;
	background: var(--bde-button-custom-background-color);
	border-color: var(--bde-button-custom-border-color);
	border-width: var(--bde-button-border-width);
	border-style: solid;
	margin-bottom: 10px;
	margin-top: 5px;
}

.webko-button--mail:hover {
	background: var(--bde-button-custom-background-color-hover);
	border-color: var(--bde-button-custom-border-color-hover);
	color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283) !important;
	box-shadow: 0px 3px 10px 0px #0000001f;
}

/* Ring */

.webko-button--ring {
	--bde-transition-duration: 100ms;
	--bde-button-custom-border-color: #B8C3C1;
	--bde-button-custom-border-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-background-color: transparent;
	--bde-button-custom-background-color-hover: var(--bde-palette-color-1-bdb84410-3a13-4d24-9c48-465a475435bc);
	--bde-button-custom-text-color: var(--bde-brand-primary-color);
	--bde-button-custom-text-color-hover: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283);
	color: var(--bde-brand-primary-color) !important;
	background: var(--bde-button-custom-background-color);
	border-color: var(--bde-button-custom-border-color);
	border-width: var(--bde-button-border-width);
	border-style: solid;
	margin-bottom: 10px;
	margin-top: 5px;
}

.webko-button--ring:hover {
	background: var(--bde-button-custom-background-color-hover);
	border-color: var(--bde-button-custom-border-color-hover);
	color: var(--bde-palette-color-1-73248a97-7863-45d6-86b8-6d0cca82f283) !important;
	box-shadow: 0px 3px 10px 0px #0000001f;
}

.webko-button.purple {
	border-color: #cec2c8;
	color: var(--bde-palette-color-1-8623eb81-721a-4325-87a2-73606d6f8848) !important;
}

.webko-button.purple:hover {
	color: white !important;
	border-color: var(--bde-button-custom-background-color-hover) !important;
}