.form-group > label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: rgb(var(--color-label));
}
.form-group,
.append-group {
  position: relative;
}

.form-group .form-input {
  display: block;
  width: 100%;
}

.form-input,
.form-textarea,
.form-select {
  border-radius: var(--radius) !important;
  border-color: rgb(var(--color-border)) !important;
  background: rgb(var(--color-action)) !important;
  padding-block: 12px !important;
  padding-inline: 18px !important;
  font-weight: 500 !important;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
}

.append-group .form-input,
.append-group .form-textarea,
.append-group .form-select {
  padding-inline-start: 46px !important;
}

.append-group .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  margin-inline-start: 12px;
  width: 27px;
  height: 27px;
  color: rgb(var(--color-secondary));
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-input::-moz-placeholder,
.form-textarea::-moz-placeholder,
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder {
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-secondary));
}

.form-input:focus,
.form-textarea:focus,
.form-radio:focus,
.form-checkbox:focus,
.form-select:focus {
  --tw-ring-color: rgb(var(--color-primary)) !important;
  border-color: rgb(var(--color-white)) !important;
}

.invalid,
.invalid:focus {
  --tw-ring-color: rgb(var(--color-error)) !important;
  border-color: rgb(var(--color-error)) !important;
}

.form-error {
  display: flex;
  color: rgb(var(--color-error));
  gap: 0.5rem;
  font-size: 14px;
  margin-top: 8px;
}

.form-* {
  transition: 0.5s all;
}

.form-disabled [disabled] {
  background-color: rgb(var(--color-border)) !important;
  cursor: not-allowed;
}