/**
 * Northstar Elementor button
 */

.elementor-widget-northstar_button a.northstar-btn {
	--color: #262c3c;
	--color-cream: #f5f0e8;
	--hover-text: #f5f0e8;
	--hover-background: #262c3c;

	display: inline-flex;
	align-items: center;
	justify-content: center;

    font-family: "Cousine", monospace;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.143;
	letter-spacing: 0.018rem;

	appearance: none;
	border: none;
	background: transparent;
	color: var(--color);
	
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 12px 40px;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	transition:
		color 0.4s ease,
		transform 0.4s ease,
		letter-spacing 0.4s ease;
    white-space: nowrap;
}

.elementor-widget-northstar_button
a.northstar-btn.northstar-btn--on-dark {
	--color: #f5f0e8;
	--hover-text: #262c3c;
    background: var(--hover-text);
}

.northstar-btn__shape {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	pointer-events: none;
}

.northstar-btn__path {
	fill: none;
	stroke: var(--color, currentColor);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
	transition: fill 0.4s ease;
}

.northstar-btn__label {
	position: relative;
	z-index: 1;
}

.elementor-widget-northstar_button a.northstar-btn:hover,
.elementor-widget-northstar_button a.northstar-btn:focus-visible {
	color: var(--hover-text)!important;
}

.elementor-widget-northstar_button a.northstar-btn:hover .northstar-btn__path,
.elementor-widget-northstar_button a.northstar-btn:focus-visible .northstar-btn__path {
	fill: var(--color);
}

.elementor-widget-northstar_button a.northstar-btn:focus-visible {
	outline: 2px solid var(--color);
	outline-offset: 4px;
}

@supports (corner-shape: scoop) {
	.elementor-widget-northstar_button a.northstar-btn {
		border: 1px solid var(--color);
		border-radius: 9px;
		corner-shape: scoop;
		transition:
			color 0.4s ease,
			background-color 0.4s ease,
			transform 0.4s ease,
			letter-spacing 0.4s ease;
	}

	.northstar-btn__shape {
		display: none;
	}

	.elementor-widget-northstar_button a.northstar-btn:hover,
	.elementor-widget-northstar_button a.northstar-btn:focus-visible {
		background-color: var(--color);
	}
}

@supports not (corner-shape: scoop) {
	.elementor-widget-northstar_button a.northstar-btn {
		border: 1px solid transparent;
	}

	.elementor-widget-northstar_button a.northstar-btn::before,
	.elementor-widget-northstar_button a.northstar-btn::after {
		content: "";
		position: absolute;
		inset: -1px;
		z-index: 0;
		pointer-events: none;
	}

	.elementor-widget-northstar_button a.northstar-btn::before {
		background:
			linear-gradient(var(--color), var(--color)) top / calc(100% - 18px) 1px no-repeat,
			linear-gradient(var(--color), var(--color)) bottom / calc(100% - 18px) 1px no-repeat,
			linear-gradient(var(--color), var(--color)) left / 1px calc(100% - 18px) no-repeat,
			linear-gradient(var(--color), var(--color)) right / 1px calc(100% - 18px) no-repeat,
			radial-gradient(circle at 0 0, transparent 8px, var(--color) 8px, var(--color) 9px, transparent 9.5px) 0 0 / 9px 9px no-repeat,
			radial-gradient(circle at 100% 0, transparent 8px, var(--color) 8px, var(--color) 9px, transparent 9.5px) 100% 0 / 9px 9px no-repeat,
			radial-gradient(circle at 100% 100%, transparent 8px, var(--color) 8px, var(--color) 9px, transparent 9.5px) 100% 100% / 9px 9px no-repeat,
			radial-gradient(circle at 0 100%, transparent 8px, var(--color) 8px, var(--color) 9px, transparent 9.5px) 0 100% / 9px 9px no-repeat;
	}

	.elementor-widget-northstar_button a.northstar-btn::after {
		background: var(--color);
		opacity: 0;
		transition: opacity 0.4s ease;
		-webkit-mask-image:
			radial-gradient(circle at 0 0, transparent 9px, #000 9.5px),
			radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px),
			radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px),
			radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px);
		-webkit-mask-size: 51% 51%;
		-webkit-mask-position: 0 0, 100% 0, 100% 100%, 0 100%;
		-webkit-mask-repeat: no-repeat;
		mask-image:
			radial-gradient(circle at 0 0, transparent 9px, #000 9.5px),
			radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px),
			radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px),
			radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px);
		mask-size: 51% 51%;
		mask-position: 0 0, 100% 0, 100% 100%, 0 100%;
		mask-repeat: no-repeat;
	}

	.elementor-widget-northstar_button a.northstar-btn:hover::after,
	.elementor-widget-northstar_button a.northstar-btn:focus-visible::after {
		opacity: 1;
	}

	.northstar-btn__shape {
		display: none;
	}
}

@media (max-width: 424px){
	.elementor-widget-northstar_button a.northstar-btn {
		padding-left: 25px;
		padding-right: 25px;
	}
}

@supports (corner-shape: scoop) {
    .elementor-widget-northstar_button a.northstar-btn.northstar-btn--on-image{
		border: solid 1px var(--color-cream);
		color: var(--color-cream)!important;
	}

	@supports (corner-shape: scoop) {
    .elementor-widget-northstar_button a.northstar-btn.northstar-btn--on-image:hover, .elementor-widget-northstar_button a.northstar-btn.northstar-btn--on-image:focus-visible {
		border-color: var(--hover-background);
	}