/*
---------------------------------------------------------
VARIABLES
--------------------------------------------------------- */
.lp-overlay-button,
.lp-overlay__container {
  /* General */
  --lp-overlay-button__transition: all 0.3s ease;
  /* Button */
  --lp-overlay-button__border: 1px solid var(--env-ui-color-brand);
  --lp-overlay-button__border-radius: var(--env-button-border-radius);
  --lp-overlay-button__background-color: var(--env-ui-color-brand);
  --lp-overlay-button__font-color: var(--env-ui-color-brand-contrast);
  --lp-overlay-button__font-size: var(--env-font-size-x-small);
  --lp-overlay-button__font-weight: 400;
  --lp-overlay-button__padding: var(--env-spacing-small);
  --lp-overlay-button__background-color--hover: var(--env-ui-color-brand-80);
  --lp-overlay-button__border-color--hover: var(--env-ui-color-brand-80);
  --lp-overlay-button__font-color--hover: var(--env-ui-color-brand-80-contrast);
  /* Close button */
  --lp-overlay-button__close-border: 1px solid var(--env-ui-color-brand);
  --lp-overlay-button__close-border-radius: var(--env-border-radius);
  --lp-overlay-button__close-background-color: var(--env-ui-color-brand);
  --lp-overlay-button__close-font-color: var(--env-ui-color-brand-contrast);
  --lp-overlay-button__close-font-size: var(--env-font-size-small);
  --lp-overlay-button__close-font-weight: 400;
  --lp-overlay-button__close-padding: var(--env-spacing-small);
  --lp-overlay-button__close-background-color--hover: var(--env-ui-color-brand-80);
  --lp-overlay-button__close-border-color--hover: var(--env-ui-color-brand-80);
  --lp-overlay-button__close-font-color--hover: var(--env-ui-color-brand-80-contrast);
  /* Icon */
  --lp-overlay-button__icon-font-color: var(--env-ui-color-brand-contrast);
  --lp-overlay-button__icon-font-size: var(--env-font-size-x-small);
  --lp-overlay-button__icon-font-color--hover: var(--env-ui-color-brand-contrast);
  /* Overlay */
  --lp-overlay__inner-background-color: var(--env-ui-color-brand-05);
  --lp-overlay__header-padding: var(--env-spacing-large) var(--env-spacing-large) 0;
  --lp-overlay__content-padding: var(--env-spacing-large);
  --lp-overlay__title-font-size: var(--env-font-size-medium);
  --lp-overlay__title-font-weight: 600;
  --lp-overlay__title-font-color: var(--env-ui-color-brand-05-contrast);
}
/*
---------------------------------------------------------
BUTTON & CLOSE BUTTON
--------------------------------------------------------- */
.lp-overlay-button,
.lp-overlay__close-button {
  display: flex;
  align-items: center;
  background-color: var(--lp-overlay-button__background-color);
  border: var(--lp-overlay-button__border);
  border-radius: var(--lp-overlay-button__border-radius);
  box-sizing: border-box;
  color: var(--lp-overlay-button__font-color);
  font-size: var(--lp-overlay-button__font-size);
  font-weight: var(--lp-overlay-button__font-weight);
  min-height: 48px;
  padding: var(--lp-overlay-button__padding);
  transition: var(--lp-overlay-button__transition);
  gap: 0 0.4em;
  flex-wrap: wrap;
}
.lp-overlay-button:hover,
.lp-overlay__close-button:hover {
  background-color: var(--lp-overlay-button__background-color--hover);
  border-color: var(--lp-overlay-button__border-color--hover);
  color: var(--lp-overlay-button__font-color--hover);
}
.lp-overlay__close-button {
  margin-left: auto;
}
html:not(.js) .lp-overlay-button__wrapper {
  display: none;
}
/*
---------------------------------------------------------
ICONS
--------------------------------------------------------- */
.lp-overlay-button .lp-icon,
.lp-overlay__close-button .lp-icon {
  margin: 0;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.05em;
  width: 1em;
  fill: currentColor;
}
/*
---------------------------------------------------------
OVERLAY
--------------------------------------------------------- */
/* Fix för safari */
div.lp-overlay__container.lp-overlay__container--visible .lp-overlay__inner {
  max-height: -webkit-fill-available;
}
.lp-overlay__container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 1000;
  pointer-events: none;
}
.lp-overlay__inner {
  position: relative;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  max-height: 100vh;
  max-width: 100vw;
  overscroll-behavior: contain;
  overflow: auto;
  transition: left 0.56s ease, right 0.56s ease, opacity 0.56s linear;
  background-color: var(--lp-overlay__inner-background-color);
  z-index: 1000;
  pointer-events: auto;
}
.lp-overlay__header {
  padding: var(--lp-overlay__header-padding);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.lp-overlay__title {
  margin: 0;
  font-size: var(--lp-overlay__title-font-size);
  color: var(--lp-overlay__title-font-color);
  font-weight: var(--lp-overlay__title-font-weight);
}
.lp-overlay__content {
  padding: var(--lp-overlay__content-padding);
}
.lp-overlay-body--noscroll {
  overflow: hidden;
}
.lp-overlay__backdrop {
  position: fixed;
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  z-index: 999;
  top: 0;
  left: 0;
}