leptonic-modal-host {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  padding: 0.5em;

  &[data-has-modals="true"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

leptonic-modal-backdrop {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(92, 92, 92, 0.5);
  backdrop-filter: blur(5px);
}

leptonic-modals {
  display: block;
  width: 100%;
  z-index: 1;

  > :not(:last-child) {
    display: none;
  }
}

leptonic-modal {
  display: flex;
  flex-direction: column;
  color: var(--modal-color);
  background-color: var(--modal-background-color);
  font-size: var(--modal-font-size);
  padding: var(--modal-padding);
  z-index: 1;
  margin: auto;
  width: fit-content;
  min-width: 15vw;
  max-height: 95vh;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);

  leptonic-modal-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--modal-header-padding);

    leptonic-modal-title {
      margin: 0;
      font-size: 1.3em;
      font-weight: 500;
    }
  }

  leptonic-modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--modal-body-padding);
  }

  leptonic-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--modal-footer-padding);
  }
}