/* ===== Base Styles ===== */
/* Layout */
.flex { display: flex; }
.inline-block { display: inline-block; }
.absolute { position: absolute; }
.items-center { align-items: center; }
.relative { position: relative; }

/* Spacing */
.m-0 { margin: 0; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Sizing */
.h-2 { height: 0.5rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.w-7 { width: 1.75rem; }

/* Typography */
.font-bold { font-weight: 700; }
.font-light { font-weight: 300; }
.text-2xl { font-size: 1.5rem; }
.text-md { font-size: 1rem; }

/* Colors */
.text-black { color: #000; }
.text-gray-500 { color: #6b7280; }
.text-gray-700 { color: #374151; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #fff; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-green-500 { background-color: #10b981; }

/* Effects */
.rounded { border-radius: 20px; }
.rounded-full { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.opacity-70 { opacity: 0.7; }

/* Password Container */
.password-container { 
	position: relative; display: flex; align-items: center;
}
.secure-password-container {
  button {
    display:flex;
    &:hover, &:focus {background-color:transparent;color:inherit;}
  }
}

/* Input Field */
.password-input { flex: 1 1 0%; background-color: #fff; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 1.5rem; outline: none; }

/* Buttons */
.toggle-password { padding: 0.5rem 1rem; color: #000; }
.toggle-password:hover { color: #6b7280; }

.clear-input { padding: 0.5rem 0.75rem; color: #000; }

.copy-password { display: none; color: #ef4444; }
.copy-password:hover { color: #b91c1c; }

.generate-password { padding: 0.5rem 0.75rem; color: #000; position: absolute; left: 3rem; font-size: 1.5rem; font-weight: 300; }

.genPass { color: #ef4444; font-weight: 700; text-decoration: underline; }
.genPass:hover { color: #dc2626; }

/* Password Strength */
.password-strength { margin-bottom: 1rem; }
.bar { height: 0.5rem; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; }

/* Password Checks */
.password-checks { display: flex; justify-content: space-between; color: #374151; }
.check-item { display: flex; align-items: center; }
.checkmark { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background-color: #10b981; margin-right: 0.5rem; }

/* Text Styles */
.sp-title { font-size: 1rem; font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; margin-bottom: 0; }
.sp-text { margin: 0; padding-top: 0.75rem; }

/* Label */
.lab { cursor: text; opacity: 0.7; }

/* Active State */
.act { font-weight: 700; }

/* Loading Icon */
.load-icon { height: 1.5rem; display: inline-block; }

.border { border-width: 1px; border-style: solid; }
.border-gray-500 { border-color: #6b7280; }
.rounded-lg { border-radius: 30px; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.mt-10 { margin-top: 50px; }
.max-w-xl { max-width: 600px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.cursor-text { cursor: text; }
.bg-red-500 { background-color: #ef4444; }
.bg-yellow-500 { background-color: #f59e0b; }
.h-full { height: 100%; }

/* Media Queries */
@media (max-width: 768px) {
  .password-checks { flex-direction: column; row-gap: 10px; }
  .generate-password { font-size: 14px !important; }
  .generate-password svg { position: absolute; right: -16px; }
}

@media (max-width: 450px) {
  .generate-password label { display: none; }
}

/* Additional Styles */
.password-input { min-width: 0; background-color: transparent !important; border: 0 !important; padding-left: 0 !important; }
.password-input:focus { border: 0 !important; }
.strength-bar { transition: width 0.3s ease, background-color 0.3s ease; }
.uppercase-check,.special-check,.number-check,.pattern-check,.leaked-check{ display: flex; align-items: center; justify-content: center; color: white; transition: all 0.2s ease; }
.generate-password.loading svg { animation: spin 1s linear infinite; }
.generate-password { font-size: 1.5rem !important; }
.msgIcon { height: 80px; width:80px; border-radius: 50%; display: inline-block; padding: 5px; }
.font-light { font-weight: 300 !important; }
.loading { animation: spin 1s linear infinite; }

/* Keyframes */
@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0); }
}