/*
========================================
Input styles
Version 2 (versioned to bust cache)
========================================
*/
form input[type='text'],
form input[type='password'] {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid var(--border-01, #e2e8f0);
  background-color: var(--background, #ffffff);
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  font-size: 0.875rem; /* text-small */
  line-height: 1.25rem;
  outline: none;
}

form input[type='text']::placeholder,
form input[type='password']::placeholder {
  color: var(--text-faint, #9ca3af);
}

form input[type='text']:focus,
form input[type='password']:focus {
  border-color: var(--border-01, #e2e8f0);
}

form input[type='text']:focus-visible,
form input[type='password']:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--background, #ffffff), /* ring-offset */
    0 0 0 4px var(--ring, #3b82f6); /* ring */
}

form input[type='text']:disabled,
form input[type='password']:disabled {
  background-color: var(--surface-01, #f1f5f9);
  color: var(--text-faint, #9ca3af);
  cursor: not-allowed;
}

form input[type='checkbox'] {
  accent-color: var(--primary-600);
}