// TODO: Google Material icons font should be removed during next release after > 10.x
/* stylelint-disable-next-line import-notation, at-rule-prelude-no-invalid */
@import (css)
	url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

/* stylelint-disable-next-line import-notation */
@import url("@vectoricons/atlas-icons/style.css");

/* Other colors */
@text-muted: fade(@text-color, 75%);
@text-color: @brand-secondary;
@border-color: @brand-secondary-light-3;

/* Spacer */
@spacer: 1rem; /* Default */

/* stylelint-disable indentation */
// prettier-ignore
@grid-breakpoints: {
	xs: 0;
	sm: 576px;
	md: 768px;
	lg: 992px;
	xl: 1200px;
	xxl: 1600px;
}

// prettier-ignore
@grid-breakpoints-max: {
	xs: (@grid-breakpoints[sm] - 0.02);
	sm: (@grid-breakpoints[md] - 0.02);
	md: (@grid-breakpoints[lg] - 0.02);
	lg: (@grid-breakpoints[xl] - 0.02);
	xl: (@grid-breakpoints[xxl] - 0.02);
}

/* stylelint-enable */

/* Media queries breakpoints
* The maximum value is calculated as the minimum of the next one less 0.02px
* to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
* See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
* Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
* See https://bugs.webkit.org/show_bug.cgi?id=178261
*/

@screen-xs-min: @grid-breakpoints[xs];
@screen-sm-min: @grid-breakpoints[sm];
@screen-md-min: @grid-breakpoints[md];
@screen-lg-min: @grid-breakpoints[lg];
@screen-xl-min: @grid-breakpoints[xl];
@screen-xxl-min: @grid-breakpoints[xxl];

@screen-xs-max: @grid-breakpoints-max[xs];
@screen-sm-max: @grid-breakpoints-max[sm];
@screen-md-max: @grid-breakpoints-max[md];
@screen-lg-max: @grid-breakpoints-max[lg];
@screen-xl-max: @grid-breakpoints-max[xl];

/* Fonts */

@font-face {
	font-family: "Swedbank Headline";
	src: url("../fonts/SwedbankHeadline-Bold.woff") format("woff");
}

@font-face {
	font-family: "Swedbank Headline Black";
	src: url("../fonts/SwedbankHeadline-Black.woff") format("woff");
}

@font-face {
	font-family: "Akkurat Mono";
	src: url("../fonts/AkkuratMonoLLWeb-Regular.woff") format("woff");
}

@font-face {
	font-family: "Akkurat Mono";
	src: url("../fonts/AkkuratMonoLLWeb-Bold.woff") format("woff");
	font-weight: bold;
}

@font-face {
	font-family: "Akkurat Mono";
	src: url("../fonts/AkkuratMonoLLWeb-Italic.woff") format("woff");
	font-style: italic;
}

@font-face {
	font-family: "Akkurat Mono";
	src: url("../fonts/AkkuratMonoLLWeb-BoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "Futura PT W08 Book";
	src:
		url("../fonts/FuturaBook.woff2") format("woff2"),
		url("../fonts/FuturaBook.woff") format("woff");
}
@font-face {
	font-family: "Futura PT W08 Medium";
	src:
		url("../fonts/FuturaMedium.woff2") format("woff2"),
		url("../fonts/FuturaMedium.woff") format("woff");
}
@font-face {
	font-family: "Futura PT W08 Demi";
	src:
		url("../fonts/FuturaDemi.woff2") format("woff2"),
		url("../fonts/FuturaDemi.woff") format("woff");
}

/*
*   CSS Variables (custom properties)
*/

/* all .less variables have been converted over to CSS variables then we can delete them */

:root {
	/* COLORS */
	--text-color: var(--brand-secondary);
	--border-color: var(--brand-secondary-light-3);

	/*
    * TYPOGRAPHY
    * ==========================================================================
    */

	/* fonts */
	--font-stack: "Arial", sans-serif;

	/* Font Size */
	--base-font-size: 1rem;
	--font-size-large: calc(var(--base-font-size) * 1.25);
	--font-size-small: calc(var(--base-font-size) * 0.875);

	/* Font Weight */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	--font-weight-base: var(--font-weight-normal);

	/* line heights */
	--line-height-base: 1.5;

	/*
    * Spacing
    * ===========================================================================
    */

	/* Spacer */
	--spacer: 1rem; /* Default */

	/* Margin */
	--base-margin: var(--spacer);
	--base-margin-xs: calc(var(--base-margin) / 4);
	--base-margin-sm: calc(var(--base-margin) / 2);
	--base-margin-lg: calc(var(--base-margin) * 1.5);
	--base-margin-xl: calc(var(--base-margin) * 2);
	--base-margin-xxl: calc(var(--base-margin) * 4);

	/* Padding */
	--base-padding: var(--spacer);
	--base-padding-xs: calc(var(--base-padding) / 4);
	--base-padding-sm: calc(var(--base-padding) / 2);
	--base-padding-lg: calc(var(--base-padding) * 1.5);
	--base-padding-xl: calc(var(--base-padding) * 2);
	--base-padding-xxl: calc(var(--base-padding) * 4);

	// misc paddings
	--vscroll-padding-right: 17px;

	/* Forms spacing */
	--input-padding-x: 16px;
	--input-padding-y: 12px;
	--border-width: 1px;
	--border-width-focus: 2px;
	--border-width-diff-focus: calc(
		var(--border-width-focus, 2px) - var(--border-width, 1px)
	);

	// Border radius
	--border-radius-modal: 20px;
	--border-radius-expandable: 16px;

	/**
	*Z-indexes
	*/
	--tooltip-z-index: 1100;
	--skip-link-active-z-index: 1000;
	--toast-z-index: 700;
	--dialog-z-index: 600;
	--sheet-z-index: 500;
	--action-list-z-index: 450;
	--topbar-z-index: 400;
	--sidebar-z-index: 400;
	--datepicker-z-index: 150;
	--dropdown-z-index: 150;
	--navigation-z-index: 100;
	--progress-steps-z-index: 100;
	--tabs-z-index: 100;
	--skip-link-z-index: -100;
}

/*
* Scaffolding
* -------------------------------------------------- */

/* Reset the box-sizing
*
* Heads up! This reset may cause conflicts with some third-party widgets.
* For recommendations on resolving such conflicts, see
* http://getbootstrap.com/getting-started/#third-box-sizing
*/

/* Body reset */

html {
	-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
	height: 100%;
	scroll-behavior: smooth;
	line-height: 1.15; /* 1 */
	text-size-adjust: 100%; /* 2 */

	@media (min-width: @screen-lg-max) {
		scroll-snap-type: y mandatory;
	}
}

body {
	font-family: var(--font-stack);
	font-size: var(--base-font-size);
	line-height: var(--line-height-base, 1.5);
	color: var(--brand-secondary);
	background-color: var(--white);
	height: 100%;
	margin: 0;

	&.no-vscroll {
		overflow-x: hidden;
	}

	&.no-scroll {
		overflow: hidden;
	}

	&.has-vscroll {
		overflow: hidden;

		@media screen and (min-width: @screen-sm-min) {
			padding-right: var(--vscroll-padding-right, 17px);

			.dialog {
				padding-right: var(--vscroll-padding-right, 17px);
			}
		}
	}
}

/* Reset fonts for relevant elements */
input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Unordered and Ordered lists */
ul,
ol {
	margin-top: 0;
	margin-bottom: var(--base-margin);

	ul,
	ol {
		margin-bottom: 0;
	}
}

/* Only display content to screen readers
*
* See: http://a11yproject.com/posts/how-to-hide-content/ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: rect(0 0 0 0);
	border: 0;
}

/* Use in conjunction with .sr-only to only display content when it's focused.
* Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
* Credit: HTML5 Boilerplate
*/

.sr-only-focusable {
	&:active,
	&:focus {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}
}

/* iOS "clickable elements" fix for role="button"
*
* Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
* for traditionally non-focusable elements with role="button"
* see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
* Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
*/

[role="button"] {
	cursor: pointer;
}

/*
    MIXINS
*/

/* stylelint-disable less/color-no-invalid-hex, less/no-duplicate-variables */
.media-breakpoint-up(@size, @abbr, @ruleset) {
	& when (@size > 0) {
		@infix: ~"-@{abbr}";
		@media (min-width: @size) {
			@ruleset();
		}
	}

	& when (@size = 0) {
		@infix: ~"";
		@ruleset();
	}
}
/* stylelint-enable */

.tab-focus(@color: @brand-secondary) {
	/* Default */
	/* stylelint-disable-next-line declaration-property-value-no-unknown */
	outline: 2px solid @color;

	/* Webkit */
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

.close-button() {
	color: var(--text-color);
	opacity: 0.8;
	line-height: 0.7;
	transition: opacity 0.3s ease-in-out;
	border: none;

	&:hover {
		opacity: 1;
		cursor: pointer;
		background-color: rgb(73 60 59 / 10%);
	}

	&:focus {
		.tab-focus();
	}
}

* {
	box-sizing: border-box;
}

@media (forced-colors: active) {
	.close-button() {
		outline: 2px solid transparent;
	}
}