.lux-modal-root {
  // Create a stacking context so that the modal is in front of everything.
  // This should be placed at the root of the application and only needs to be applied to one div.
  position: relative;
  z-index: 1;
}

.lux-modal-header {
  padding: var(--modal-header-footer-padding);
  border-bottom: 1px solid var(--divider-color);

  .title {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: var(--bold-font-weight);
  }

  .close {
    padding: 0;
    border: 0;
    border-radius: 100px;
    background-color: var(--secondary-color);
    color: var(--modal-bg-color);
    width: 1.25rem;
    height: 1.25rem;

    opacity: 0.75;

    &:hover {
      opacity: 1;
    }
  }

  @media (max-width: 450px) {
    background-color: var(--modal-header-bg-color);
  }
}

.lux-modal {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  width: 480px;
  max-height: 70vh;

  border-radius: var(--modal-border-radius);
  box-shadow: var(--shadow-lg);
  background-color: var(--modal-bg-color);
  border: var(--modal-border);

  &.sticky-footer {
    .lux-modal-body {
      background-color: var(--secondary-bg-color);
    }
  }

  &.lux-alert {
    width: 360px;
  }

  @media (max-width: 650px) {
    &:not(.lux-alert) {
      width: calc(100% - 40px);
      max-width: 480px;
    }
  }

  @media (max-width: 450px) {
    &:not(.compact):not(.lux-alert) {
      width: 100%;
      height: 100%;
      border-radius: 0;
      max-width: 100%;
      max-height: 100%;
    }

    &.lux-alert {
      width: calc(100% - 40px);
      max-width: 360px;
    }
  }

  .lux-modal-body {
    width: 100%;
    padding: var(--modal-padding);
  }

  .lux-modal-footer {
    border-top: 1px solid var(--divider-color);
    background-color: var(--primary-bg-color);
    width: 100%;
    padding: var(--modal-header-footer-padding);
  }
}

.lux-modal-overlay {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 900;

  background: var(--overlay-color);

  @keyframes pop {
    50% {
      transform-origin: center;
      transform: scale(1.005);
    }
  }

  &.pop .lux-modal {
    animation: pop 0.3s cubic-bezier(0.4, 0, 0.2, 1) 1;
  }

  @media (max-width: 450px) {
    padding-top: 0;
    align-items: center;
  }
}