/* Float Field Container */
.float_field_container {
  @apply field-container;
}

/* Float Field */
.float_field {
  @apply field text-right;
}

/* Float Component Styles */
.float-field-container {
  @apply flex flex-col gap-4 font-system;
}

.float-field-label {
  @apply flex flex-col gap-4;
}

.float-field-label-text {
  @apply text-sm font-medium text-gray-700;
}

.float-field-required {
  @apply text-red-600 ml-2;
}

.float-field-wrapper {
  @apply relative flex items-center w-full transition-all ease-in-out duration-200;
}

.float-field-wrapper.focused {
  @apply shadow-outline-blue rounded-md;
}

.float-field-prefix,
.float-field-suffix {
  @apply absolute text-gray-500 text-sm pointer-events-none;
}

.float-field-prefix {
  @apply left-3;
}

.float-field-suffix {
  @apply right-9;
}

.float-field-controls {
  @apply absolute right-1 top-1 bottom-1 flex flex-col border-l border-gray-300 rounded-r-md overflow-hidden;
}

.float-field-control {
  @apply flex items-center justify-center w-6 h-1/2 p-0 border-none bg-gray-50 text-gray-500 cursor-pointer transition-all ease-in-out duration-200;
}

.float-field-control:hover:not(:disabled) {
  @apply bg-gray-100 text-gray-700;
}

.float-field-control:active:not(:disabled) {
  @apply bg-gray-200;
}

.float-field-control.up {
  @apply border-b border-gray-300;
}

.float-field-control:disabled {
  @apply cursor-not-allowed opacity-50;
}

.float-field:hover:not(.disabled) {
  @apply border-gray-400;
}

.float-field:focus {
  @apply outline-none border-blue-500;
}

.float-field.error {
  @apply border-red-600;
}

.float-field.disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

.float-field-error {
  @apply text-xs text-red-600 min-h-4;
}

.float-field-error-placeholder {
  @apply min-h-4;
}

/* Size Variants */
.float-field-sm .float_field {
  @apply field-sm;
}

.float-field-lg .float_field {
  @apply field-lg;
}

/* Range Float */
.range-float {
  @apply flex flex-col gap-2;
}

.range-visualization {
  @apply h-1 bg-gray-200 rounded overflow-hidden;
}

.range-fill {
  @apply h-full bg-blue-500 transition-all ease-in-out duration-200;
}