/**
 * Form Elements
 *
 * Base styles for form elements to ensure consistent appearance
 * across the design system. These styles provide foundation
 * styling that Lit components can build upon.
 */

.form-input,
.form-textarea,
.form-select {
  /* Reset */
  margin: 0;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;

  /* Typography */
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);

  /* Layout */
  width: 100%;
  display: block;

  /* Appearance */
  background-color: var(--color-surface-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);

  /* Transitions */
  transition: var(--transition-colors),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-select option[value=""] {
  color: var(--color-text-tertiary);
}

/* Hover states */
.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) {
  border-color: var(--color-border-secondary);
  background-color: var(--color-surface-tertiary);
}

/* Focus states */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary-main);
  background-color: var(--color-surface-tertiary);
  box-shadow: var(--shadow-focus);
}

/* Disabled states */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
  background-color: var(--color-surface-secondary);
}

/* Error states */
.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--color-error-main);
}

.form-input.error:focus,
.form-textarea.error:focus,
.form-select.error:focus {
  border-color: var(--color-error-main);
  box-shadow: var(--shadow-focus);
}

/* Size variants */
.form-input.sm,
.form-textarea.sm,
.form-select.sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.form-input.lg,
.form-textarea.lg,
.form-select.lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-5);
}

/* Select specific styles */
.form-select {
  cursor: pointer;
  padding-right: var(--space-10); /* Space for dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: var(--space-5) var(--space-5);
}

.form-select.sm {
  padding-right: var(--space-8);
  background-position: right var(--space-2) center;
}

.form-select.lg {
  padding-right: var(--space-12);
  background-position: right var(--space-4) center;
}

/* Textarea specific */
.form-textarea {
  resize: vertical;
  min-height: var(--size-24);
  line-height: var(--leading-relaxed);
}

/* Checkbox and radio base styles */
.form-checkbox,
.form-radio {
  /* Reset */
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Layout */
  width: var(--size-sm);
  height: var(--size-sm);
  cursor: pointer;

  /* Appearance */
  border: var(--border-width-thin) solid var(--color-border-primary);
  background-color: var(--color-surface-secondary);
  border-radius: var(--radius-sm);

  /* Transitions */
  transition: var(--transition-colors),
    border-color var(--duration-fast) var(--ease-out);
}

.form-radio {
  border-radius: 50%;
}

/* Checked states */
.form-checkbox:checked,
.form-radio:checked {
  background-color: var(--color-primary-main);
  border-color: var(--color-primary-main);
}

.form-checkbox:checked:hover,
.form-radio:checked:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Hover states */
.form-checkbox:hover:not(:disabled),
.form-radio:hover:not(:disabled) {
  border-color: var(--color-border-secondary);
  background-color: var(--color-surface-tertiary);
}

/* Focus states */
.form-checkbox:focus,
.form-radio:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Disabled states */
.form-checkbox:disabled,
.form-radio:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

/* Form groups */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.form-label.required::after {
  content: " *";
  color: var(--color-error-main);
}

.form-helper {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-tight);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error-main);
  line-height: var(--leading-tight);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Fieldset styles */
fieldset {
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0;
  margin-bottom: var(--space-4);
}

fieldset legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  padding: 0 var(--space-2);
  margin-left: var(--space-2);
}