:host {
  /**
   * @prop --klevu-popup-spacing 0: Spacing around popup
   * @prop --klevu-popup-width unset: Width of popup
   * @prop --klevu-popup-height unset: Height of popup
   */
  --spacing: var(--klevu-popup-spacing, 0);
  --width: var(--klevu-popup-width, unset);
  --height: var(--klevu-popup-height, unset);
}

.originContainer {
  display: inline-block;
}

.originContainer.fullWidthOrigin {
  width: 100%;
}

.popup {
  box-sizing: border-box;
  padding: var(--spacing);
  border-radius: var(--klevu-border-radius-s);
  transition: opacity 0.4s, visibility 0.4s;
  z-index: 1000;
  background: white;
  width: var(--width, max-content);
  height: var(--height);
  overflow: auto;
}

.elevation-1 {
  box-shadow: var(--klevu-elevation-1);
}

.elevation-2 {
  box-shadow: var(--klevu-elevation-2);
}

.elevation-3 {
  box-shadow: var(--klevu-elevation-3);
}

.popup.left {
  left: 0;
}

.popup.right {
  right: 0;
}

.popup.fullwidth {
  min-width: 100%;
}

.background {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.06);
  inset: 0;
}

dialog {
  margin: 0;
  position: fixed;
  border: 0;
  z-index: 1000;
}