/* Copyright (c) Juan-Pablo Scaletti <juanpablo@jpscaletti.com> */
.jxui-form-field {
  width: var(--240px);
}
.jxui-form-field[data-size="large"] {
  width: var(--288px);
}
.jxui-form-field[data-block] {
  width: 100%;
}


.jxui-form-wrapper {
  font-size: var(--ui-font-size-md);
  color: var(--ui-fg-input);
  background-color: var(--ui-bg-base);
  border: 1px solid var(--ui-border-default);
  border-radius: var(--ui-radius-base);
  outline: none;
  box-shadow: var(--ui-shadow-inset);
  overflow: hidden;
  display: flex;
  padding: 0;
  gap: var(--6px);
  flex-wrap: nowrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  transition-duration: 100ms;
  transition-property: color,background-color,box-shadow,outline;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.jxui-form-wrapper:where(:not([data-disabled] > .jxui-form-wrapper)):focus-within {
  outline: 4px solid var(--ui-outline);
  outline-offset: 0;
}
[data-disabled] > .jxui-form-wrapper {
  background-color: var(--ui-bg-base-200);
  border-color: var(--ui-border-disabled);
  color: var(--ui-fg-muted);
}

[data-validation="invalid"] > .jxui-form-wrapper {
  border-color: var(--ui-red-500);
  outline-color: color-mix(in srgb, var(--ui-red-500) 25%, transparent);
}
[data-validation="valid"] > .jxui-form-wrapper {
  border-color: var(--ui-green-500);
  outline-color: color-mix(in srgb, var(--ui-green-500) 25%, transparent);
}

[data-disabled] > .jxui-form-wrapper,
[data-disabled] > .jxui-form-wrapper *,
.jxui-form-wrapper :disabled {
  cursor: not-allowed;
}

[data-size="large"] > .jxui-form-wrapper {
  font-size: var(--ui-font-size-lg);
  gap: var(--8px);
}
.jxui-form-wrapper:has(input) {
  height: var(--40px);
}
[data-size="large"] > .jxui-form-wrapper:has(input) {
  height: var(--48px);
}

.jxui-form-wrapper > :not(input, select, textarea) {
  align-self: center;
  color: var(--ui-fg-muted);
  flex-shrink: 0;
  flex-grow: 0;
  user-select: none;
}


.jxui-form-label {
  display: flex;
  align-items: center;
  color: var(--ui-fg-input);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--ui-font-size-sm);
  height: var(--26px);
  width: 100%;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-size="large"] > * > .jxui-form-label,
[data-size="large"] > .jxui-form-label {
  height: var(--28px);
}
[data-disabled] > * > .jxui-form-label,
[data-disabled] > .jxui-form-label {
  color: var(--ui-fg-muted);
  cursor: default;
}
[data-required] > * > .jxui-form-label::after
[data-required] > .jxui-form-label::after {
  content: "*";
  margin-left: 4px;
}


.jxui-form-caption {
  display: block;
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
  margin: 4px 0 0;
  width: 100%;
  color: var(--ui-fg-muted);
}


.jxui-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 5px 0 0;
  width: 100%;
}
.jxui-form-valid {
  display: block;
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ui-green-500);
}
.jxui-form-invalid {
  display: block;
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ui-red-500);
}


@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.jxui-form-loading {
  text-align: center;
  line-height: 1;
  animation: rotate 1s linear infinite;
  margin-top: 2px;
  font-size: 1em;
}


.jxui-form-counter {
  text-align: right;
  color: var(--ui-fg-muted);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto
}
.jxui-form-counter[data-validation="invalid"] {
  color: var(--ui-red-500);
}