/*
-------------------------------------------
wf-self-service.css
-------------------------------------------

  Beskrivning: Stilregler för Självservice
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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


/*
-------------------------------------------
Självservicelista - knappar (Rekai samt Menymodul)
------------------------------------------- */

/* Bakgrundsplattan */
.wf-self-service-list {
  background-color: var(--june-mossa-70);
  padding: var(--wf-spacing-80) var(--wf-spacing-80) var(--wf-spacing-80) 0;
  border-radius: 0 0 var(--wf-radius-large) 0;
  margin-bottom: var(--wf-spacing-80);
  position: relative;
}

.wf-self-service-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50vw;
  height: 100%;
  width: 50vw;
  background-color: inherit;
  z-index: -1;
}

/* Specialare där bakgrundsplattan ska täcka hela sidbredden */
.sv-template-sjalvservice .wf-self-service-list:before,
.sv-template-fraktion .wf-self-service-list:before,
.sv-template-malgruppsflikar .wf-self-service-list:before,
.sv-template-sida .wf-self-service-list:before,
.sv-template-abonnemang .wf-self-service-list:before {
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

/* Rubrik */
.wf-self-service-list .env-ui-text-sectionheading,
.wf-self-service-list .env-ui-text-subheading {
  color: #fff;
  margin-bottom: var(--wf-spacing-30) !important;
}


/* Listan */
.wf-self-service-list ul {
  list-style: none;
  margin: 0 0 var(--wf-spacing-30);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--wf-spacing-20);
  position: relative;
}

.sv-marketplace-reakai-rekai-webapp ul { /* Specifikt för populär självservice */
  display: flex;
  flex-wrap: wrap;
}

.wf-self-service-list ul::before {
  content: '';
  height: 100%;
  width: .5em;
  position: absolute;
  top: 0;
  left: calc(var(--wf-spacing-40) * -1);
  border-radius: var(--wf-radius-small);
  background-color: var(--june-mossa); 
}

.wf-self-service-list ul > li > a {
  padding: var(--wf-button-with-icon-padding);
  background-color: #fff;  
  border-radius: var(--wf-radius-large);
  color: var(--june-mossa);
  display: flex;
  align-items: center;
  font-family: var(--wf-heading-font);
  font-size: var(--wf-font-size-normal-small);
  font-weight: 500;
  line-height: 1.3;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  height: 100%;
  box-sizing: border-box;
}

.wf-self-service-list ul > li > a::before { 
  content: '';
  height: 1.25em;
  width: 1.25em;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right: .5em;
  flex-shrink: 0;
  display: inline-block;
  background-image: var(--wf-icon-self-service-mossa);
}


/* Se all självservice-länk */
.wf-self-service-list > .sv-text-portlet:last-child .normal:last-child {
  margin-bottom: 0;
}

.wf-self-service-list > .sv-text-portlet:last-child a {
  color: #fff;
}

.wf-self-service-list > .sv-text-portlet:last-child a::after {
  background-image: var(--wf-chevron-right-white);
}


/* Hover, Focus */
.wf-self-service-list ul > li > a:hover {
  text-decoration-thickness: 2px;
}

.wf-self-service-list ul > li > a:focus {
  outline-color: var(--june-mossa);
  outline-offset: var(--env-focus-offset);
}


/*
-------------------------------------------
All Självservice
------------------------------------------- */

/* Alla listor i en tab */
.wf-tab-container > .wf-self-service-list {
  padding: var(--wf-spacing-60) var(--wf-spacing-40) var(--wf-spacing-60) var(--wf-spacing-80);
}

.wf-tab-container .wf-self-service-list::before {
  display: none;
}

.wf-tab-container .wf-self-service-list ul {
  margin-bottom: 0;
}


/* Populära */
.wf-tab-container > .sv-row > .sv-column-8 .wf-self-service-list,
.wf-tab-container > .sv-row > .sv-column-12 .wf-self-service-list {
  background-color: transparent;
  padding: var(--wf-spacing-30) 0 var(--wf-spacing-40) var(--wf-spacing-80);
}

.wf-tab-container > .sv-row > .sv-column-8 > .sv-text-portlet .env-ui-text-subheading,
.wf-tab-container > .sv-row > .sv-column-12 > .sv-text-portlet .env-ui-text-subheading {
  padding-top: var(--wf-spacing-40);
  padding-left: var(--wf-spacing-80);
}

.wf-tab-container > .sv-row > .sv-column-8 .rek-prediction a,
.wf-tab-container > .sv-row > .sv-column-12 .rek-prediction a {
  border: 2px solid var(--june-mossa-70);
  background-color: var(--june-mossa-05);
}


/* Felanmälan */
.wf-self-service-report {
  background-color: var(--wf-color-warning-fair);
}

.wf-self-service-report .env-ui-text-subheading {
  color: var(--wf-color-222);
}

.wf-self-service-report ul::before {
  background-color: var(--wf-color-warning);
}


/* Beställ tjänster */
.wf-self-service-order {
  background-color: var(--june-bjork-50);
}

.wf-self-service-order .env-ui-text-subheading {
  color: var(--june-mossa);
}

.wf-self-service-order ul::before {
  background-color: var(--june-gras);
}


/* Hantera abonnemang */
.wf-self-service-manage {
  background-color: var(--june-sand-05);
}

.wf-self-service-manage .env-ui-text-subheading {
  color: var(--june-mossa);
}

.wf-self-service-manage > .sv-vertical.sv-layout {
  padding-top: var(--wf-spacing-30);
  margin-top: var(--wf-spacing-30);
  position: relative;
}

.wf-self-service-manage > .sv-vertical.sv-layout::before {
  content: '';
  height: 1px;
  background-color: var(--june-sand-30);
  width: calc(100% + var(--wf-spacing-40));
  position: absolute;
  left: calc(var(--wf-spacing-40) * -1);
  top: 0;
}

.wf-self-service-manage ul::before {
  background-color: var(--june-asfalt);
}

.wf-self-service-manage > .sv-vertical.sv-layout .normal:last-child {
  margin-bottom: 1em;
}


/* Focus */
.wf-tab-container > .sv-row > .sv-column-8 .wf-self-service-list ul > li > a:focus ,
.wf-tab-container > .sv-row > .sv-column-12 .wf-self-service-list ul > li > a:focus {
  outline-color: #fff;
}


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

@media (prefers-reduced-motion: no-preference) {
  .wf-self-service-list ul > li > a {
    transition: var(--wf-btn-transition);
  }
  
  .wf-self-service-list ul > li > a:hover {
    transform: var(--wf-btn-transform);
  }
}


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


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

  .wf-self-service-list ul {
    grid-template-columns: 1fr 1fr;
  }

}



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

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

  .wf-self-service-list {
    padding: var(--wf-spacing-80) var(--wf-spacing-40) var(--wf-spacing-40) var(--wf-spacing-60);
    margin: 0 calc(var(--wf-page-edge-spacing) * -1) var(--wf-spacing-120);
    border-radius: 0;
  }

  .wf-self-service-list ul {
    grid-template-columns: 1fr;
  }

  /* Byt plats på linjen till hela objektet */
  .wf-self-service-list ul::before {
    display: none;
  }

  .wf-self-service-list {
    display: block;
  }

  .sv-template-sjalvservice .wf-self-service-list:before, 
  .sv-template-fraktion .wf-self-service-list:before, 
  .sv-template-malgruppsflikar .wf-self-service-list:before, 
  .sv-template-sida .wf-self-service-list:before, 
  .sv-template-abonnemang .wf-self-service-list:before,
  .wf-self-service-list::before {
    content: '';
    height: 100%;
    width: .5em;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--june-mossa);
    z-index: 1;
  }
  
  /* Populära på all självservice */
  .sv-marketplace-reakai-rekai-webapp ul { /* Specifikt för populär självservice */
    display: grid;
    flex-wrap: wrap;
  }

  .wf-tab-container > .sv-row > .sv-column-8 .wf-self-service-list,
  .wf-tab-container > .sv-row > .sv-column-12 .wf-self-service-list {
    padding-left: var(--wf-page-edge-spacing);
    padding-right: var(--wf-page-edge-spacing);
    padding-bottom: 0;
    margin-bottom: var(--wf-spacing-40);
  }

  .wf-tab-container > .sv-row > .sv-column-8 > .sv-text-portlet .env-ui-text-subheading,
  .wf-tab-container > .sv-row > .sv-column-12 > .sv-text-portlet .env-ui-text-subheading {
    padding-left: 0;
  }

  /* Kategorier på all självservice */
  .wf-tab-container > .wf-self-service-list.wf-self-service-report,
  .wf-tab-container > .wf-self-service-list.wf-self-service-order,
  .wf-tab-container > .wf-self-service-list.wf-self-service-manage {
    padding: var(--wf-spacing-80) var(--wf-spacing-40); 
    margin-bottom: 0;
  }


  /* Hantera abonnemang */
  .wf-self-service-manage > .sv-vertical.sv-layout {
    padding-top: var(--wf-spacing-60);
    margin-top: var(--wf-spacing-60);
  }

  .wf-self-service-manage > .sv-vertical.sv-layout::before {
    width: 100%;
    left: 0;
  }
}