/*
=========================================================
FOCUS VISIBLE CSS
=========================================================
 * Styling för tekniken "focus visible" som möjliggör 
 * särskiljande styling för fokus baserat på om det 
 * aktiveras via tangentbord eller mus.
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
SYNLIGT FOKUS
--------------------------------------------------------- */


/* Default fokusutseende på länkar och knappar */

.sv-responsive :focus-visible,
.sv-responsive button:focus-visible,
.sv-responsive input[type='submit']:focus-visible,
.sv-responsive input[type='button']:focus-visible,
.sv-responsive .lp-app-submenu__menu-item__link:focus-visible,
a.lp-skip-to-content:focus-visible,
.pagecontent .sv-form-portlet input[type='checkbox']:focus-visible + label:before,
.pagecontent .sv-form-portlet input[type='radio']:focus-visible + label:before {
  box-shadow: 0 0 0 var(--env-focus-size) var(--env-focus-inner-color);
  outline: var(--env-focus-size) solid var(--env-focus-outline-color);
  outline-offset: var(--env-focus-offset);
}

body .sv-defaultFormTheme input[type=button]:focus-visible,
body .sv-defaultFormTheme input[type=submit]:focus-visible,
body .sv-defaultFormTheme input[type=reset]:focus-visible {
  outline-offset: 0;
}

/* Fokusutseende på länkar mot mörk bakgrund 

.lp-footer a:focus,
.lp-footer button:focus {
  outline: 3px solid #fff;
}*/

/* Fix för att outline ska nå upp till kontrastkraven 
.sv-responsive .lp-topmenu a:focus,
.sv-responsive .lp-logo a:focus{
   outline: 3px solid #000;
}*/


/* Fix för tätt placerade länkars outline inte ska hamna undervarandra vid focus */
.lp-header .lp-logo a:focus-visible,
.lp-header button.lp-overlay-button:focus-visible,
.lp-topmenu a:focus-visible,
.sv-responsive .lp-app-submenu ul a:focus-visible,
.sv-responsive .lp-app-submenu ul button:focus-visible,
.lp-alert .sv-channel-item h1 a:focus-visible {
  position: relative;
  z-index: 2;
}

/* Lägg outlinen innaför länken */

.lp-header .lp-logo a:focus-visible,
.lp-header button.lp-overlay-button:focus-visible,
.lp-topmenu li a:focus-visible,
.lp-app-submenu li > a:focus-visible,
.lp-app-submenu li > button:focus-visible,
.lp-app-submenu__back-link:focus-visible,
.sv-readspeaker_expandingplayer-portlet > a.normal:focus-visible,
.sv-text-portlet-content table .tablesorter-header:focus-visible {
  box-shadow: inset 0 0 0 calc(var(--env-focus-size) * 2) var(--env-focus-inner-color);
  outline-offset: calc(-1 * var(--env-focus-size));
}

a.lp-skip-to-content:focus-visible,
a.lp-skip-to-menu:focus-visible {
  /* outline-color: var(--env-element-primary-background-color-dark); */
  outline-offset: -1px;
  /* outline-style: solid; */
}

/* Fix för Cirkulärt i sidfot */
.lp-footer a:has(img) {
  display: block;
}

/* Menyer & listor */

[class*='lp-boxes'] > .sv-layout.lp-clickable-area:has(:focus-visible),
.lp-box-menu__content.lp-clickable-area:has(:focus-visible) {
  box-shadow: 0 0 0 var(--env-focus-size) var(--env-focus-inner-color);
  outline: var(--env-focus-size) solid var(--env-focus-outline-color);
  outline-offset: var(--env-focus-offset);
}

.lp-box-menu__content.lp-clickable-area:has(:focus-visible) {
  position: relative;
}

[class*='lp-boxes'] > .sv-layout.lp-clickable-area:has(:focus-visible) :focus-visible,
.lp-box-menu__content.lp-clickable-area:has(:focus-visible) :focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

[class*='lp-boxes'] > .sv-layout.lp-clickable-area:has(:focus-visible) a:focus-visible,
.lp-box-menu__content.lp-clickable-area:has(:focus-visible) a:focus-visible {
  text-decoration: underline;
}