/* Base style */
.input-control {
  @apply -relative;
  --input-control-prefix: 8px;
  --input-control-suffix: 8px;
}

/* With icons */
.input-control-suffix,
.input-control-prefix {
  @apply -absolute -left-0 -top-0 -h-full -flex -items-center -opacity-50 -px-2 -whitespace-nowrap -w-[--input-control-prefix] -z-[1];
}
.input-control-suffix {
  @apply -justify-end -w-[--input-control-suffix];
}

.input-control-suffix {
  @apply -right-0 -left-auto;
}
.form-control:focus + .input-control-prefix,
.form-control:focus + .input-control-suffix {
  @apply -opacity-100;
}

.input-control > .form-control {
  @apply -pl-[--input-control-prefix] -pr-[--input-control-suffix];
}
.input-control > select.form-control {
  padding-right: calc(var(--input-control-suffix) + 20px);
}
.input-control > select.form-control {
  background-position-x: calc(100% - var(--input-control-suffix) - 8px);
}

.has-prefix {--input-control-prefix: var(--input-control-fix-width);}
.has-suffix {--input-control-suffix: var(--input-control-fix-width);}

.has-prefix-sm {--input-control-prefix: var(--input-control-fix-width-sm);}
.has-suffix-sm {--input-control-suffix: var(--input-control-fix-width-sm);}

.has-prefix-lg {--input-control-prefix: var(--input-control-fix-width-lg);}
.has-suffix-lg {--input-control-suffix: var(--input-control-fix-width-lg);}

.has-prefix-icon {--input-control-prefix: 32px;}
.has-suffix-icon {--input-control-suffix: 32px;}

.input-control.has-prefix-icon {
  --input-control-prefix: 32px;
}
.input-control.has-suffix-icon {
  --input-control-suffix: 32px;
}
.input-control.has-prefix-icon > .input-control-prefix,
.input-control.has-suffix-icon > .input-control-suffix {
  @apply -justify-center -p-0;
}
