/* ------------------------ 
	Accessibility helper 
 ------------------------ */
.visually-hidden:not(:focus):not(:active) {
	/* Kan användas för att dölja något från vanliga användare men ändå synas för skärmläsaren. */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.visually-hidden {
	all: unset;
}

body.using-mouse *:focus,
body.using-mouse input[type="date"]:focus,
body.using-mouse input[type="datetime-local"]:focus,
body.using-mouse input[type="email"]:focus,
body.using-mouse input[type="month"]:focus,
body.using-mouse input[type="number"]:focus,
body.using-mouse input[type="password"]:focus,
body.using-mouse input[type="tel"]:focus,
body.using-mouse input[type="text"]:focus,
body.using-mouse input[type="time"]:focus,
body.using-mouse input[type="url"]:focus,
body.using-mouse input[type="week"]:focus,
body.using-mouse select:focus,
body.using-mouse textarea:focus {
	/* focus styling när man navigerar med mus */
	border-color: var(--border-marked);
}

body:not(.using-mouse) *:focus {
	/* focus styling när man navigerar med tangentbordet */
	outline: var(--focus-outline);
	box-shadow: var(--focus-shadow);

}

body:not(.using-mouse) .btn:focus,
body:not(.using-mouse) .btn a:focus,
body:not(.using-mouse) .info-link:focus,
body:not(.using-mouse) button:focus,
body:not(.using-mouse) .utlamningsstalle a:focus {
    /* Grey */
    color: var(--cta-background2);
    background: var(--cta-color2);
	border: 1px solid var(--cta-background2);
}

body:not(.using-mouse) .btn.cta-primary:focus,
body:not(.using-mouse) .btn.cta-primary a:focus,
body:not(.using-mouse) .buy-button:focus,
body:not(.using-mouse) input[type='button']:focus,
body:not(.using-mouse) .Knapp_Generell a:focus,
body:not(.using-mouse) .Checkout a:focus,
body:not(.using-mouse) .Knapp_Kop a:focus,
body:not(.using-mouse) .Knapp_Kop2:focus,
body:not(.using-mouse) .do_more #more_of_it:focus,
body:not(.using-mouse) .iconbadge:focus {
    /* Black */
    color: var(--cta-background1);
    background: var(--cta-color1);
	border: 1px solid var(--cta-background1);
}

body:not(.using-mouse) .btn.cta-primary-invert:focus,
body:not(.using-mouse) #cookieBarAccept:focus,
body:not(.using-mouse) .list-as-buttons li a:focus {
    /* White */
    color: var(--cta-color1);
    background: var(--cta-background1);
    border: 1px solid var(--cta-color1);
}

*:focus-visible {
	/* focus styling när man navigerar med tangentbordet */
	outline: none;
}

body:not(.using-mouse) .focusInset:focus {
	/* focus styling inuti komponenten istället för runt om */
	box-shadow: var(--focus-inset-shadow);
}

/* Skip knappar / Bypass buttons */
a.skip-link {
	position: absolute;
	top: 0;
	left: -100vw;
	background: var(--base-background7);
	color: var(--base-color7);
	padding: var(--input-and-button-padding-size);
	box-shadow: var(--box-shadow1);
	z-index: 100;
	height: fit-content;
    width: fit-content;
}

a.skip-link:focus {
	-webkit-transform: translateX(100vw);
	transform: translateX(100vw);
}

/* Animationer */
@media (prefers-reduced-motion: no-preference) {
	a.skip-link {
		-webkit-transition: -webkit-transform 200ms ease-in-out;
		-ms-transition: transform 200ms ease-in-out;
		-moz-transition: transform 200ms ease-in-out;
		transition: transform 200ms ease-in-out;
	}
	.btn,
	.btn a,
	.Knapp_Generell a,
	.buy-button,
	.info-link,
	.do_more #more_of_it,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.Checkout a,
	.Knapp_Kop a,
	.Knapp_Kop2,
	button,
	.utlamningsstalle a,
	input,
	select,
	textarea,
	.Artgrp_VisaFler a:hover {
		-webkit-transition: all 200ms ease-in-out;
		-ms-transition: all 200ms ease-in-out;
		-moz-transition: all 200ms ease-in-out;
		transition: all 200ms ease-in-out;
	}
	.canvas-right-module,
	.canvas-left-module,
	.canvas-right-module-sm,
	.canvas-left-module-sm,
	.canvas-right-module-xs,
	.canvas-left-module-xs {
		-webkit-transition: -webkit-transform 500ms ease;
		-ms-transition: transform 500ms ease;
		-moz-transition: transform 500ms ease;
		transition: transform 500ms ease;
	}
}