.checkout-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;

  .form-item input.error, 
  .form-item textarea.error, 
  .form-item select.error {
    border-color: var(--bs-danger);
  }

   .js-form-type-password {
    position: relative;

    button {
      position: absolute;
      right: 14px;
      top: 17px;
    }
   }

  .alert-error {
    margin: 0;
    display: none;
  }

  .form-item--error-message {
    color: var(--bs-danger);
    font-weight: normal;
    font-size: .9em;
    margin-top: 4px;
    strong {
      font-weight: normal;
    }
  }

  .form-item--error-message::before {
    content: none;
  }
}

.checkout-login-modal.shown {
  display: flex;
}

.checkout-login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.checkout-login-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--bs-body-bg);
  border-radius: 6px;
  padding: 1em;
  width: 100%;
  max-width: 400px;
  margin: 1em;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

  .form-actions {
    margin: 0;

    input[type="submit"] {
      font-size:calc(1.275rem + 0.3vw) !important;
    }
  }
}

.checkout-login-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.5em;
  line-height: 1;
  cursor: pointer;
}

/* Spinner overlay shown on the submit button while the AJAX login request is
in flight. The button is also disabled (set by JS) at the same time. */
.checkout-login-modal input[type="submit"].loading,
.checkout-login-modal button[type="submit"].loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.checkout-login-modal input[type="submit"].loading::after,
.checkout-login-modal button[type="submit"].loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25em;
  height: 1.25em;
  margin: -0.625em 0 0 -0.625em;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ucg-checkout-spin 0.6s linear infinite;
}

.checkout-login-modal .checkout-login-modal-header {
  margin: -1em;
  display: flex;
  justify-content: end;
  padding: .75em 1em;
  background: var(--bg-color-light-gray);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-bottom: .5em;
}

.checkout-login-modal .js-form-submit {
  display: block;
  width: 100%;
  color: #fff!important;
  &:hover {
    color: var(--charcoal)!important;
  }
}

@keyframes ucg-checkout-spin {
  to { transform: rotate(360deg); }
}