@scope (.form-field) {
  :scope {
    --_bg: var(--color-surface-muted);
    --_text: var(--color-text);
    --_radius: var(--radius-lg);
    --_padding-x: var(--space-xl);
    --_padding-y: var(--space-md);

    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .form-field__label {
    font-size: var(--text-label);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
  }

  .form-field__label--required::after {
    content: " *";
    color: var(--color-text-muted);
  }

  .form-field__input,
  .form-field__static-value {
    padding: var(--_padding-y) var(--_padding-x);
    background: var(--_bg);
    color: var(--_text);
    border: none;
    border-radius: var(--_radius);
    font-size: var(--text-body);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
    width: 100%;
  }

  .form-field__input {
    &::placeholder {
      color: var(--color-text-muted);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: 0;
    }

    &[aria-invalid="true"] {
      outline: 2px solid var(--color-error);
      outline-offset: 0;
    }
  }

  select.form-field__input {
    cursor: pointer;
    padding-inline-end: calc(var(--_padding-x) + 1.5rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2364748b'%3E%3Cpath d='m12 15.41 5.71-5.7-1.42-1.42-4.29 4.3-4.29-4.3-1.42 1.42z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 1.25rem;

    &:hover {
      background-color: var(--color-primary-muted);
    }
  }

  textarea.form-field__input {
    min-height: 6rem;
    resize: vertical;
  }


  :scope.form-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
  }

  .form-field__hint {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
  }

  .form-field__error {
    font-size: var(--text-caption);
    color: var(--color-error-text);
  }
}