payment-backoffice/app/features/Auth/LoginModal.scss

/* app/styles/LoginModal.scss (BEM Methodology) */
@use "sass:color";

// Variables for consistent styling
$primary-color: #2563eb; // Blue-600 equivalent
$primary-hover-color: #1d4ed8; // Blue-700 equivalent
$success-color: #16a34a; // Green-600 equivalent
$error-color: #dc2626; // Red-600 equivalent
$text-color-dark: #1f2937; // Gray-800 equivalent
$text-color-medium: #4b5563; // Gray-700 equivalent
$text-color-light: #6b7280; // Gray-600 equivalent
$border-color: #d1d5db; // Gray-300 equivalent
$bg-color-light: #f3f4f6; // Gray-100 equivalent
$bg-color-white: #ffffff;

/* --- Login Modal Block (.login-modal) --- */
.login-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(17, 24, 39, 0.75); // Gray-900 75% opacity
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem; // p-4
}

.login-modal__content {
  background-color: $bg-color-white;
  border-radius: 0.75rem; // rounded-xl
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04); // shadow-2xl
  padding: 2rem; // p-8
  width: 100%;
  max-width: 28rem; // max-w-md
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease-in-out; // transition-all duration-300
}

.login-modal__title {
  font-size: 1.875rem; // text-3xl
  font-weight: 700; // font-bold
  color: $text-color-dark;
  margin-bottom: 1.5rem; // mb-6
  text-align: center;
}

/* --- Login Form Block (.login-form) --- */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; // space-y-6
}

.login-form__group {
  // No specific styles needed here, just a container for label/input
}

.login-form__label {
  display: block;
  font-size: 0.875rem; // text-sm
  font-weight: 500; // font-medium
  color: $text-color-medium;
  margin-bottom: 0.25rem; // mb-1
}

.login-form__input {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem; // px-4 py-2
  border: 1px solid $border-color;
  border-radius: 0.5rem; // rounded-lg
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
  font-size: 0.875rem; // sm:text-sm
  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: $primary-color; // focus:border-blue-500
    box-shadow:
      0 0 0 1px $primary-color,
      0 0 0 3px rgba($primary-color, 0.5); // focus:ring-blue-500
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.login-form__message {
  text-align: center;
  font-size: 0.875rem; // text-sm
  font-weight: 500; // font-medium
}

.login-form__message--success {
  color: $success-color;
}

.login-form__message--error {
  color: $error-color;
}

.login-form__button {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem; // py-3 px-4
  border: 1px solid transparent;
  border-radius: 0.5rem; // rounded-lg
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
  font-size: 1.125rem; // text-lg
  font-weight: 600; // font-semibold
  color: $bg-color-white;
  background-color: $primary-color;
  cursor: pointer;
  transition:
    background-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out; // transition duration-300 ease-in-out
  &:hover {
    background-color: color.adjust(
      $primary-color,
      $lightness: -5%
    ); // blue-700 equivalent
  }
  &:focus {
    outline: none;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.5),
      0 0 0 4px rgba($primary-color, 0.5); // focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.login-form__spinner {
  animation: spin 1s linear infinite;
  height: 1.25rem; // h-5
  width: 1.25rem; // w-5
  color: white;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Page Container Block (.page-container) --- */
.page-container {
  min-height: 100vh;
  background-color: $bg-color-light;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif; // Assuming Inter font is used
  padding: 1rem;
}

.page-container__content {
  width: 100%;
  max-width: 56rem; // max-w-4xl
  background-color: $bg-color-white;
  border-radius: 0.75rem; // rounded-xl
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); // shadow-lg
  padding: 2rem; // p-8
  text-align: center;
}

.page-container__title {
  font-size: 2.25rem; // text-4xl
  font-weight: 700; // font-bold
  color: $text-color-dark;
  margin-bottom: 1.5rem; // mb-6
}

.page-container__message--logged-in {
  font-size: 1.25rem; // text-xl
  color: $success-color;
  margin-bottom: 1rem; // mb-4
}

.page-container__text {
  color: $text-color-medium;
  margin-bottom: 1.5rem; // mb-6
}

.page-container__button--logout {
  padding: 0.75rem 1.5rem; // px-6 py-3
  background-color: $error-color;
  color: $bg-color-white;
  font-weight: 600; // font-semibold
  border-radius: 0.5rem; // rounded-lg
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-md
  transition: background-color 0.3s ease-in-out;
}