/*
-------------------------------------------
wf-drawer.css
-------------------------------------------

  Beskrivning: Stilregler för utfällbart innehåll
  från toppen av sidan eller från höger
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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


/*
-------------------------------------------
Utfällbart innehåll från toppen av sidan
eller från höger
------------------------------------------- */

.wf-drawer-from-top,
.wf-drawer-from-right {
  display: none;
  position: fixed;
  z-index: 9999;
  background-color: var(--color-block); /* EX.TODO */
  box-shadow: 0 4px 8px rgba(36,60,29,0.3);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}

/* Specifika positioner för utfällbart innehåll */
.wf-drawer-from-top {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}

.wf-drawer-self-service,
.wf-drawer-opening-hours {
  --wf-drawer-padding:var(--wf-spacing-60);
  padding: var(--wf-drawer-padding);
}

.wf-drawer-from-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 30vw;
  min-width: 350px;
  transform: translateX(100%);
  overflow-y: auto;
}

/* När utfällbar innehåll visas */
.wf-drawer-from-top.wf-active,
.wf-drawer-from-right.wf-active {
  display: block;

  opacity: 1;
}

.wf-drawer-from-top.wf-active {
  transform: translateY(0);
}

.wf-drawer-from-right.wf-active {
  transform: translateX(0);
}


/* Visa dock alltid i grundmallen i redigeringsläget */
.sv-edit-mode.sv-template-utgangsmall .wf-drawer-from-top,
.sv-edit-mode.sv-template-utgangsmall .wf-drawer-from-right {
 position: static;
 display: block;
 transform: none;
 opacity: 1;
}


/*
-------------------------------------------
Stängknapp
------------------------------------------- */

.env-button.wf-drawer-close-btn:before {
  background-image: var(--wf-x-june-mossa);/*TODO*/
  background-repeat: no-repeat;
  background-position: center left;
  content:"";
  display:block;
  height:1em;
  width:1em;
  margin-left:-0.5em;
  margin-right:0.5em;
 }

 .env-button.wf-drawer-close-btn {
  border-radius: var(--wf-radius-small);
  margin-top: calc(-1 * (var(--wf-drawer-padding) - var(--wf-spacing-40)));
  display: flex;
  justify-self: flex-end;
  margin-right: calc(-1 * (var(--wf-drawer-padding) - var(--wf-spacing-40)));
  border:1px solid;
  border-color: var(--env-border-color-light) !important;
 }

.env-button.wf-drawer-close-btn.env-button:focus{
  background-color: transparent;
 }


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

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

  /* När innehåll från toppen visas */
  .wf-drawer-from-top.wf-active {
    animation: slideDown 0.5s ease-in-out forwards;
  }

  /* När innehåll från toppen stängs */
  .wf-drawer-from-top.wf-closing {
    animation: slideUp 0.3s ease-in-out forwards;
  }

  /* När innehåll från höger visas */
  .wf-drawer-from-right.wf-active {
    animation: slideInRight 0.3s ease-in-out forwards;
  }

  /* När innehåll från höger stängs */
  .wf-drawer-from-right.wf-closing {
    animation: slideOutRight 0.3s ease-in-out forwards;
  }

}