/*
=========================================================
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);
}

/* Fix för tätt placerade länkars outline inte ska hamna undervarandra vid focus */

.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;
}

/* Ljustering av offset/placering */

.lp-topmenu li a:focus-visible,
.sv-responsive .lp-app-submenu__menu-item__link: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,
.lp-expandable-content__wrap .lp-expandable-content__toggler:focus-visible,
.lp-search input[type='submit']:focus-visible,
.lp-search form button:focus-visible,
a.lp-skip-to-content:focus-visible,
.lp-header .lp-site-tools a:focus-visible,
button.lp-overlay-button:focus-visible,
button.lp-overlay__close-button:focus-visible,
a.lp-page-top: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));
}

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


/*
a.lp-skip-to-content {
  outline-offset: -1px;
}*/

/* Fallback */

@supports not selector(:focus-visible) {
  .sv-responsive :focus,
  .sv-responsive a:focus,
  .sv-responsive button:focus {
    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);
  }
}