/*
=========================================================
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-layout :focus,
.sv-layout button:focus {
  outline: 3px solid #000;
  outline-offset: 3px;
}


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

.lp-footer a:focus,
.lp-footer button:focus,
.lp-tools-wrapper :focus,
.lp-tools-wrapper .rsbtn_tooltoggle:focus {
  outline: 3px solid #fff;
}


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

.lp-topmenu a:focus,
.sv-layout .lp-menu ul a:focus {
  outline-offset: 0;
  position: relative;
  z-index: 2;
}

.sv-layout .lp-menu ul button:focus {
  outline-offset: 0;
  z-index: 2;
}


/*
---------------------------------------------------------
DOLD FOKUS FÖR MUS
--------------------------------------------------------- */

/* Tar bort outline för fokus via musinteraktion */
html.js-focus-visible :focus:not(.focus-visible) {
  outline: none !important;
}
/**
 * För tillfället verkar webbläsarna inte klara av att tolka den föreslagna standarden 
 * och ignorerar då stilregler som innehåller :focus-visible. På grund av det behöver 
 * man ha dubbla uppsättningar med stilregler för att separera selektorn för standarden 
 * och den för JS-implementationen.
 */
html:not(.js-focus-visible) :focus:not(:focus-visible) {
  outline: none !important;
}