/*
-------------------------------------------
wf-tabs.css
-------------------------------------------

  Beskrivning: Stilregler för Flikar och flikinnehåll
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Flikar
------------------------------------------- */

/* Visa / stäng */
.wf-tabs-anchor-links {
  display: none;
}

.wf-tab-container {
  display: block;
}

.wf-tab-container.wf-tab-container-hidden {
  display: none;
}


/* Visa alltid i redigeringsläge */
.sv-edit-mode .wf-tab-container.wf-tab-container-hidden {
  display: block;
}

.sv-edit-mode .wf-tabs {
  position: relative;
}

.sv-edit-mode .wf-tabs::after {
  content: "Flikarna är inte klickbara i redigeringsläge.";
  position: absolute;
  bottom: -36px;
  left: 0;
  width: 100%;
  background-color: var(--june-mossa);
  color: #fff;
  padding: .5em;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 3px;
}


/* Flikar */
.wf-tabs {
  display: flex;
  border-bottom: 2px solid var(--june-mossa-10);
  margin: var(--wf-spacing-40) calc(var(--wf-spacing-40) * -1) var(--wf-spacing-60) ;
  padding-left: var(--wf-spacing-40);
  padding-right: var(--wf-spacing-40);
}

.wf-tabs button {
  border: none;
  padding: var(--wf-spacing-30) var(--wf-spacing-40) var(--wf-spacing-30) var(--wf-spacing-30);
  background-color: var(--june-mossa-10);
  color: var(--june-mossa);
  font-weight: 600;
  line-height: 1;
  border: 2px solid var(--june-mossa-10);
  border-radius: var(--wf-radius-large) var(--wf-radius-large) 0 0;
  margin-bottom: -2px;
  margin-right: .2em;
  text-decoration: underline;

  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.wf-tabs button[aria-selected="true"] {
  cursor: default;
}

.wf-tabs button::before {
  content: '';
  height: .95em;
  width: .95em;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right: .5em;
  margin-bottom: .2em;
  flex-shrink: 0;
  display: inline-block;
}

.wf-tabs button:focus-visible {
  z-index: 1;
}


/* Ikoner */
.wf-tabs button#tab-villa-radhus::before {
  background-image: var(--wf-icon-villa-radhus-mossa);
}

.wf-tabs button#tab-fritidshus::before {
  background-image: var(--wf-icon-fritidshus-mossa);
}

.wf-tabs button#tab-flerbostadshus::before {
  background-image: var(--wf-icon-flerbostadshus-mossa);
}

.wf-tabs button#tab-verksamhet::before {
  background-image: var(--wf-icon-verksamhet-mossa);
}

.wf-tabs button#tab-detta-kan-du-lamna::before {
  background-image: var(--wf-icon-avfallstyp-mossa);
}

.wf-tabs button#tab-undantag-for-verksamhet::before {
  background-image: var(--wf-icon-verksamhet-mossa);
}


/* Hover*/
.wf-tabs button:hover {
  background-color: var(--june-mossa-05);
  text-decoration-thickness: 2px;
}

/* Aktiv flik */
.wf-tabs button[aria-selected="true"] {
  background-color: #fff;
  border-bottom-color: #fff;
  text-decoration: none;
}


/* Flikinnehåll */
.wf-tab-container.sv-layout {
  padding-bottom: var(--wf-spacing-40);
  margin-bottom: var(--wf-spacing-80);
  position: relative;
}

.wf-tab-container::after {
  content: '';
  display: block;
  height: 1em;
  border-left: 2px solid var(--june-mossa-10);
  border-right: 2px solid var(--june-mossa-10);
  border-bottom: 2px solid var(--june-mossa-10);
  border-radius: 0 0 var(--wf-radius-large) var(--wf-radius-large);
  
  position: absolute;
  bottom: 0;
  left: calc(var(--wf-spacing-40) * -1);
  width: calc(100% + var(--wf-spacing-40) * 2);
}

.wf-tab-container > .sv-text-portlet:first-child .env-ui-text-sectionheading {
  margin-bottom: var(--wf-spacing-40) !important;
}

.sv-template-all-sjalvservice .wf-tab-container > .sv-text-portlet:first-child .env-ui-text-sectionheading {
  margin-bottom: var(--wf-spacing-20) !important;
}


/*
-------------------------------------------
Ankarlänkar utan js och i mobil
------------------------------------------- */

.wf-tabs-anchor-links {
  background-color: var(--june-mossa-05);
  color: var(--env-block-font-color);
  box-sizing: border-box;
  padding: var(--wf-spacing-40) var(--wf-spacing-80) var(--wf-spacing-40) var(--wf-spacing-40);
  width: calc(100% + calc(var(--wf-page-edge-spacing) * 2));
  margin-left: calc(var(--wf-page-edge-spacing) * -1);
  margin-right: calc(var(--wf-page-edge-spacing) * -1);
  margin-bottom: var(--wf-spacing-80);
}

.wf-tabs-anchor-links .env-ui-text-sectionheading {
  font-size: var(--wf-font-size-small);
  margin-bottom: var(--wf-spacing-20) !important;
}

.wf-tabs-anchor-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-spacing-20);
}

.wf-tabs-anchor-links a {
  display: flex;
  align-items: center;
  padding: .2em 0;
  color: var(--june-mossa);
}

.wf-tabs-anchor-links a::before {
  content: '';
  display: block;
  margin-right: .5em;
  border-radius: 50%;
  width: 1.75em;
  height: 1.75em;
  background-color: var(--june-mossa-30);
  background-image: var(--wf-scroll-arrow-mossa);
  background-size: 1em;
  background-repeat: no-repeat;
  background-position: center center;
}

.sv-template-alla-abonnemang .wf-tabs-anchor-links {
  margin-top: var(--wf-spacing-40);
}


/*
-------------------------------------------
Utan Javascript
------------------------------------------- */

/* Ankarlänkar istället för flikar */
.sv-no-js .wf-tab-container {
  display: block;
}

.sv-no-js .wf-tabs-anchor-links {
  display: inline-block;
}

.sv-no-js .wf-tabs {
  display: none;
}


/*
-------------------------------------------
Animeringar
------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .wf-tabs button[aria-selected="false"] {
    transition: var(--wf-tab-transition);
  }

  .wf-tabs button[aria-selected="false"]:hover {
    transform: var(--wf-tab-transform);
  }

}


/*
-------------------------------------------
Mobil
------------------------------------------- */

@media screen and (max-width: 767px) {

  /* Ankarlänkar istället för flikar */

  .wf-tabs-anchor-links {
    display: inline-block;
  }
    
  .wf-tab-container.wf-tab-container-hidden {
    display: block;
  }

  .wf-tabs,
  .wf-tab-container::after {
    display: none;
  }

}