/*
 * Form Design Component
 *
 * CSS variables (define on container):
 *   --form-design-bg:     background color
 *   --form-design-text:   text/foreground color
 *   --form-design-accent: accent color (borders, buttons)
 */

.form-design {
  background-color: var(--form-design-bg);
  color: var(--form-design-text);
}

.form-design__title {
  color: var(--form-design-text);
}

.form-design__input {
  border-bottom-color: color-mix(in srgb, var(--form-design-accent) 40%, transparent);
  color: var(--form-design-text);
  transition: border-color 0.3s ease;
}

.form-design__input::placeholder {
  color: color-mix(in srgb, var(--form-design-text) 20%, transparent);
}

.form-design__input:focus {
  border-bottom-color: var(--form-design-accent);
}

.form-design__button {
  color: color-mix(in srgb, var(--form-design-text) 25%, transparent);
  transition: color 0.3s ease;
}

.form-design__input:focus + .form-design__button {
  color: var(--form-design-accent);
}

.form-design__footer {
  color: var(--form-design-text);
}

/* Completed state */
.form-design__completed-icon {
  background-color: color-mix(in srgb, var(--form-design-accent) 30%, transparent);
}

.form-design__completed-icon svg {
  color: var(--form-design-accent);
}

.form-design__completed-title {
  color: var(--form-design-text);
}

.form-design__completed-text {
  color: var(--form-design-text);
}

/* Loading skeleton */
.form-design__skeleton {
  background-color: color-mix(in srgb, var(--form-design-text) 15%, transparent);
}

.form-design__skeleton-light {
  background-color: color-mix(in srgb, var(--form-design-text) 8%, transparent);
}

.form-design__skeleton-border {
  border-bottom-color: color-mix(in srgb, var(--form-design-accent) 40%, transparent);
}