.na-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.na-form-inline {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.na-form-horizontal > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1rem;
}
.na-form-horizontal .na-form-label {
  width: 10rem;
  flex-shrink: 0;
}
.na-form-horizontal .na-form-input,
.na-form-horizontal .na-form-textarea,
.na-form-horizontal .na-form-select {
  flex: 1;
  min-width: 0;
}


.na-form-group {
  display: flex;
  width: 100%;
}
.na-form-group .na-form-input,
.na-form-group .na-form-select {
  flex: 1;
  min-width: 0;
}
.na-form-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  white-space: nowrap;
}
.na-form-group .na-form-input:not(:last-child),
.na-form-group .na-form-select:not(:last-child),
.na-form-group .na-form-group-text:not(:last-child) {
  border-right: none;
}



.na-form-label {
  font-size: 0.875rem;
  font-weight: 600;
}
.na-form-label:has(~ :required)::after {
  content: '*';
  color: var(--na-color-danger);
  margin-left: 0.25rem;
}

.na-form-help {
  font-size: 0.8125rem;
  color: #64748b;
}

.na-form-input,
.na-form-textarea,
.na-form-select {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: inherit;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.75rem;
}

.na-form-input:focus,
.na-form-textarea:focus,
.na-form-select:focus {
  outline: 2px solid var(--na-color-primary);
  outline-offset: -1px;
  border-color: var(--na-color-primary);
}

.na-form-input:disabled,
.na-form-textarea:disabled,
.na-form-select:disabled {
  background-color: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

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

.na-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.na-form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.na-form-check input {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--na-color-primary);
  cursor: pointer;
}
.na-form-check input:focus-visible {
  outline: 2px solid var(--na-color-primary);
  outline-offset: 2px;
}
.na-form-check input:disabled,
.na-form-check input:disabled ~ span {
  cursor: not-allowed;
  opacity: 0.5;
}
.na-form-check > span {
  font-size: 0.9375rem;
  cursor: pointer;
}

.na-form-range {
  display: block;
  width: 100%;
  cursor: pointer;
  accent-color: var(--na-color-primary);
}
.na-form-range:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.na-form-file {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: inherit;
  cursor: pointer;
}
.na-form-file::file-selector-button {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  margin-right: 0.75rem;
  background-color: #f1f5f9;
  color: inherit;
  border: none;
  border-right: 1px solid #cbd5e1;
  cursor: pointer;
}
.na-form-file:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.na-form-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.na-form-switch input {
  appearance: none;
  width: 2.5rem;
  height: 1.375rem;
  background-color: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.na-form-switch input::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #ffffff;
  top: 0.1875rem;
  left: 0.1875rem;
}
.na-form-switch input:checked {
  background-color: var(--na-color-primary);
}
.na-form-switch input:checked::after {
  left: 1.3125rem;
}
.na-form-switch input:focus-visible {
  outline: 2px solid var(--na-color-primary);
  outline-offset: 2px;
}
.na-form-switch input:disabled,
.na-form-switch input:disabled ~ span {
  cursor: not-allowed;
  opacity: 0.5;
}
.na-form-switch > span {
  font-size: 0.9375rem;
  cursor: pointer;
}

.na-form-input-default,
.na-form-textarea-default,
.na-form-select-default { border-color: var(--na-color-default); }
.na-form-input-primary,
.na-form-textarea-primary,
.na-form-select-primary { border-color: var(--na-color-primary); }
.na-form-input-secondary,
.na-form-textarea-secondary,
.na-form-select-secondary { border-color: var(--na-color-secondary); }
.na-form-input-success,
.na-form-textarea-success,
.na-form-select-success { border-color: var(--na-color-success); }
.na-form-input-warning,
.na-form-textarea-warning,
.na-form-select-warning { border-color: var(--na-color-warning); }
.na-form-input-danger,
.na-form-textarea-danger,
.na-form-select-danger { border-color: var(--na-color-danger); }
.na-form-input-info,
.na-form-textarea-info,
.na-form-select-info { border-color: var(--na-color-info); }
.na-form-input-brand,
.na-form-textarea-brand,
.na-form-select-brand { border-color: var(--na-color-brand); }
.na-form-input-accent,
.na-form-textarea-accent,
.na-form-select-accent { border-color: var(--na-color-accent); }

.na-form-check-default input { accent-color: var(--na-color-default); }
.na-form-check-primary input { accent-color: var(--na-color-primary); }
.na-form-check-secondary input { accent-color: var(--na-color-secondary); }
.na-form-check-success input { accent-color: var(--na-color-success); }
.na-form-check-warning input { accent-color: var(--na-color-warning); }
.na-form-check-danger input { accent-color: var(--na-color-danger); }
.na-form-check-info input { accent-color: var(--na-color-info); }
.na-form-check-brand input { accent-color: var(--na-color-brand); }
.na-form-check-accent input { accent-color: var(--na-color-accent); }

.na-form-range-default { accent-color: var(--na-color-default); }
.na-form-range-primary { accent-color: var(--na-color-primary); }
.na-form-range-secondary { accent-color: var(--na-color-secondary); }
.na-form-range-success { accent-color: var(--na-color-success); }
.na-form-range-warning { accent-color: var(--na-color-warning); }
.na-form-range-danger { accent-color: var(--na-color-danger); }
.na-form-range-info { accent-color: var(--na-color-info); }
.na-form-range-brand { accent-color: var(--na-color-brand); }
.na-form-range-accent { accent-color: var(--na-color-accent); }

.na-form-file-default::file-selector-button { background-color: var(--na-color-default); color: #ffffff; }
.na-form-file-primary::file-selector-button { background-color: var(--na-color-primary); color: #ffffff; }
.na-form-file-secondary::file-selector-button { background-color: var(--na-color-secondary); color: #ffffff; }
.na-form-file-success::file-selector-button { background-color: var(--na-color-success); color: #ffffff; }
.na-form-file-warning::file-selector-button { background-color: var(--na-color-warning); color: #ffffff; }
.na-form-file-danger::file-selector-button { background-color: var(--na-color-danger); color: #ffffff; }
.na-form-file-info::file-selector-button { background-color: var(--na-color-info); color: #ffffff; }
.na-form-file-brand::file-selector-button { background-color: var(--na-color-brand); color: #ffffff; }
.na-form-file-accent::file-selector-button { background-color: var(--na-color-accent); color: #ffffff; }

.na-form-switch-default input:checked { background-color: var(--na-color-default); }
.na-form-switch-primary input:checked { background-color: var(--na-color-primary); }
.na-form-switch-secondary input:checked { background-color: var(--na-color-secondary); }
.na-form-switch-success input:checked { background-color: var(--na-color-success); }
.na-form-switch-warning input:checked { background-color: var(--na-color-warning); }
.na-form-switch-danger input:checked { background-color: var(--na-color-danger); }
.na-form-switch-info input:checked { background-color: var(--na-color-info); }
.na-form-switch-brand input:checked { background-color: var(--na-color-brand); }
.na-form-switch-accent input:checked { background-color: var(--na-color-accent); }

.na-form-input-xs,
.na-form-textarea-xs { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
.na-form-select-xs { font-size: 0.6875rem; padding: 0.25rem 2.5rem 0.25rem 0.5rem; }
.na-form-input-sm,
.na-form-textarea-sm { font-size: 0.8125rem; padding: 0.375rem 0.625rem; }
.na-form-select-sm { font-size: 0.8125rem; padding: 0.375rem 2.5rem 0.375rem 0.625rem; }
.na-form-input-md,
.na-form-textarea-md { font-size: 0.9375rem; padding: 0.5rem 0.75rem; }
.na-form-select-md { font-size: 0.9375rem; padding: 0.5rem 2.5rem 0.5rem 0.75rem; }
.na-form-input-lg,
.na-form-textarea-lg { font-size: 1.0625rem; padding: 0.625rem 1rem; }
.na-form-select-lg { font-size: 1.0625rem; padding: 0.625rem 2.5rem 0.625rem 1rem; }
.na-form-input-xl,
.na-form-textarea-xl { font-size: 1.25rem; padding: 0.75rem 1.125rem; }
.na-form-select-xl { font-size: 1.25rem; padding: 0.75rem 2.5rem 0.75rem 1.125rem; }
.na-form-input-2xl,
.na-form-textarea-2xl { font-size: 1.5rem; padding: 0.875rem 1.25rem; }
.na-form-select-2xl { font-size: 1.5rem; padding: 0.875rem 2.5rem 0.875rem 1.25rem; }
.na-form-input-3xl,
.na-form-textarea-3xl { font-size: 1.875rem; padding: 1rem 1.5rem; }
.na-form-select-3xl { font-size: 1.875rem; padding: 1rem 2.5rem 1rem 1.5rem; }

.na-form-file-xs { font-size: 0.6875rem; }
.na-form-file-xs::file-selector-button { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
.na-form-file-sm { font-size: 0.8125rem; }
.na-form-file-sm::file-selector-button { font-size: 0.8125rem; padding: 0.3125rem 0.625rem; }
.na-form-file-md { font-size: 0.9375rem; }
.na-form-file-md::file-selector-button { font-size: 0.9375rem; padding: 0.375rem 0.75rem; }
.na-form-file-lg { font-size: 1.0625rem; }
.na-form-file-lg::file-selector-button { font-size: 1.0625rem; padding: 0.5rem 0.875rem; }
.na-form-file-xl { font-size: 1.25rem; }
.na-form-file-xl::file-selector-button { font-size: 1.25rem; padding: 0.625rem 1rem; }
.na-form-file-2xl { font-size: 1.5rem; }
.na-form-file-2xl::file-selector-button { font-size: 1.5rem; padding: 0.75rem 1.125rem; }
.na-form-file-3xl { font-size: 1.875rem; }
.na-form-file-3xl::file-selector-button { font-size: 1.875rem; padding: 0.875rem 1.3125rem; }

.na-form-check-xs input { width: 0.6875rem; height: 0.6875rem; }
.na-form-check-xs > span { font-size: 0.6875rem; }
.na-form-check-sm input { width: 0.8125rem; height: 0.8125rem; }
.na-form-check-sm > span { font-size: 0.8125rem; }
.na-form-check-md input { width: 1rem; height: 1rem; }
.na-form-check-md > span { font-size: 0.9375rem; }
.na-form-check-lg input { width: 1.1875rem; height: 1.1875rem; }
.na-form-check-lg > span { font-size: 1.0625rem; }
.na-form-check-xl input { width: 1.375rem; height: 1.375rem; }
.na-form-check-xl > span { font-size: 1.25rem; }
.na-form-check-2xl input { width: 1.625rem; height: 1.625rem; }
.na-form-check-2xl > span { font-size: 1.5rem; }
.na-form-check-3xl input { width: 1.875rem; height: 1.875rem; }
.na-form-check-3xl > span { font-size: 1.875rem; }

.na-form-switch-xs input { width: 1.75rem; height: 1rem; }
.na-form-switch-xs input::after { width: 0.625rem; height: 0.625rem; }
.na-form-switch-xs input:checked::after { left: 0.9375rem; }
.na-form-switch-xs > span { font-size: 0.6875rem; }
.na-form-switch-sm input { width: 2.125rem; height: 1.1875rem; }
.na-form-switch-sm input::after { width: 0.8125rem; height: 0.8125rem; }
.na-form-switch-sm input:checked::after { left: 1.125rem; }
.na-form-switch-sm > span { font-size: 0.8125rem; }
.na-form-switch-md input { width: 2.5rem; height: 1.375rem; }
.na-form-switch-md input::after { width: 1rem; height: 1rem; }
.na-form-switch-md input:checked::after { left: 1.3125rem; }
.na-form-switch-md > span { font-size: 0.9375rem; }
.na-form-switch-lg input { width: 3rem; height: 1.625rem; }
.na-form-switch-lg input::after { width: 1.25rem; height: 1.25rem; }
.na-form-switch-lg input:checked::after { left: 1.5625rem; }
.na-form-switch-lg > span { font-size: 1.0625rem; }
.na-form-switch-xl input { width: 3.5rem; height: 1.875rem; }
.na-form-switch-xl input::after { width: 1.5rem; height: 1.5rem; }
.na-form-switch-xl input:checked::after { left: 1.8125rem; }
.na-form-switch-xl > span { font-size: 1.25rem; }
.na-form-switch-2xl input { width: 4rem; height: 2.125rem; }
.na-form-switch-2xl input::after { width: 1.625rem; height: 1.625rem; top: 0.25rem; left: 0.25rem; }
.na-form-switch-2xl input:checked::after { left: 2.125rem; }
.na-form-switch-2xl > span { font-size: 1.5rem; }
.na-form-switch-3xl input { width: 4.75rem; height: 2.5rem; }
.na-form-switch-3xl input::after { width: 1.875rem; height: 1.875rem; top: 0.3125rem; left: 0.3125rem; }
.na-form-switch-3xl input:checked::after { left: 2.5625rem; }
.na-form-switch-3xl > span { font-size: 1.875rem; }