/*
========================================
Base button styles
Version 2 (versioned to bust cache)
========================================
*/
button,
input[type="submit"],
#kc-form-options a,
#kc-registration a,
#social-google,
#social-saml {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  border: none;
  height: 2.5rem;
  padding: 0.25rem 1rem;
}

button:focus,
input[type="submit"]:focus,
#kc-form-options a:focus,
#kc-registration a:focus {
  outline: 2px solid #18181b; /* zinc-900 */
  outline-offset: 2px;
}

button:disabled,
input[type="submit"]:disabled,
#kc-form-options a:disabled,
#kc-registration a:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/*
========================================
Primary button styles
========================================
*/
form input[type="submit"],
form button[type="submit"] {
  background-color: var(--primary-700);
  color: #ffffff;
  width: 100%;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover {
  background-color: var(--primary-600);
}

form input[type="submit"]:disabled,
form button[type="submit"]:disabled {
  background-color: var(--primary-disabled);
  color: var(--text-high-contrast);
  cursor: not-allowed;
}

/*
========================================
Disable submit button when inputs are empty
========================================
*/
form:has(input:placeholder-shown) input[type="submit"],
form:has(input:placeholder-shown) button[type="submit"] {
  background-color: var(--primary-disabled);
  color: var(--text-high-contrast);
  cursor: not-allowed;
  pointer-events: none;
}

/*
========================================
Secondary button styles
========================================
*/

#kc-form-options a,
#kc-registration a {
  background-color: var(--surface-01);
  color: var(--primary);
  width: 100%;
  text-decoration: none;
}

#kc-form-options a:hover,
#kc-registration a:hover {
  background-color: var(--surface-02);
}

/*
========================================
Outline button styles
========================================
*/

#social-google,
#social-saml {
  background-color: var(--background);
  border: 1px solid var(--border-01);
  color: var(--primary);
  width: 100%;
  text-decoration: none;
}

#social-google:hover,
#social-saml:hover {
  background-color: var(--surface-01);
  border-color: var(--border-01);
}

/*
========================================
Icon button styles
========================================
*/

div:has(button[data-password-toggle]) {
  position: relative;
}

form button[data-password-toggle] {
  background-color: var(--surface-01);
  position: absolute;
  height: 24px !important;
  width: 24px !important;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
}

/* Invisible tap target expander for mobile touch accessibility */
form button[data-password-toggle]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

form button[data-password-toggle]::after {
  transform: translateX(-3px) translateY(3px);
}

form input[type="password"] + button[data-password-toggle]::after {
  content: url("../../img/eye-off.svg");
}

form input[type="text"] + button[data-password-toggle]::after {
  content: url("../../img/eye.svg");
}

form button[data-password-toggle]:hover {
  background-color: var(--surface-02);
}