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

.pagecontent .sv-text-portlet :focus {
  outline-offset: 3px;
}

.lp-sidebar .lp-level-1 > li > a:focus,
.lp-sidebar .lp-level-1 > li > button:focus,
.lp-sidebar .lp-level-2 > li > a:focus,
.lp-sidebar .lp-level-2 > li > button:focus,
.lp-sidebar .sv-readspeaker_expandingplayer-portlet a:focus,
.lp-sidebar .lp-page-share-link:focus,
.lp-sidebar .lp-close-button:focus,
.lp-footer a:focus,
.lp-footer button:focus,
.lp-cover-slide-wrapper a:focus,
.lp-start-boxes-box .sv-text-portlet a:focus,
.lp-timeline-regents-button:focus,
.lp-timeline-regents-info a:focus {
  outline-color: #fff !important;
}

.lp-sidebar button:focus {
  position: absolute;
}

.lp-flowitem a:focus {
  outline-color: #d19700;
}

.pagecontent .lp-timeline button:focus,
.pagecontent .lp-timeline a: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-responsive .lp-menu ul a:focus,
.lp-alert .sv-channel-item h1 a:focus,
.lp-headerlinks a:focus {
  position: relative;
  z-index: 4;
}

.lp-menu a:focus,
.lp-sidebar a:focus,
body .lp-sidebar .sv-readspeaker_expandingplayer-portlet a.normal:focus {
  color: rgba(255, 255, 255, 1);
  outline: none;
}

.lp-header .lp-headerlinks a:focus span {
  border-bottom: 2px solid rgba(0,0,0,1);
}

.lp-header .lp-headerlinks a:focus {
  outline: none;
}

.lp-timeline-navigation-item a:focus {
  outline-offset: -2px;
}

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