/* src/mod/built-in/input/style.css */
:root {
  --input-bg: #FFFFFF;
  --input-color: var(--text-color);
  --input-border: 1px solid #D1D5DB;
  --input-outline: #06B6D4;
  --input-label: #0891B2;
}
input::placeholder,
textarea::placeholder {
  opacity: 0.4;
  font-style: italic;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input::file-selector-button {
  color: var(--text-color);
}
input.date-only::-webkit-calendar-picker-indicator {
  display: none;
}
input.date-only::-webkit-input-placeholder {
  visibility: hidden;
}
input.hide {
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden;
}
.required {
  color: #D1D5DB;
  font-style: italic;
}
select,
textarea,
input:not([type=radio], [type=checkbox]) {
  outline-color: var(--input-outline);
  border: var(--input-border);
  border-radius: 4px;
  font-size: 16px;
  font-family: "Sarabun", sans-serif;
  line-height: 2.25;
  color: var(--input-color);
  background-color: var(--input-bg);
}
input:disabled,
select:disabled,
textarea:disabled {
  color: #9CA3AF;
  border-color: #E5E7EB;
  background-color: #F3F4F6;
}
input:disabled + div.label,
select:disabled + div.label {
  background-color: transparent;
}
select,
input:not([type=radio], [type=checkbox]) {
  height: 40px;
  padding: 1px 8px;
}
select.xl,
input.xl {
  height: 48px;
  padding: 3px 8px;
  line-height: 2.5;
}
select.lg,
input.lg {
  height: 44px;
  padding: 3px 8px;
}
select.sm,
input.sm {
  height: 36px;
  padding: 1px 8px;
  line-height: 2;
}
select.tn,
input.tn {
  height: 32px;
  padding: 1px 8px;
  font-size: 14px;
  line-height: 2;
}
select option {
  font-size: 16px;
}
textarea {
  width: 100%;
  line-height: 1.5;
  padding: 4px 8px;
  resize: vertical;
  vertical-align: top;
}
.input-box {
  position: relative;
  padding-top: 11.5px;
}
.input-box :is(input, select) {
  width: 100%;
}
.input-box .label {
  margin: 0;
  padding: 0 4px;
  line-height: 1.5;
  color: #9CA3AF;
  font-size: 13px;
  font-style: italic;
  position: absolute;
  top: 0;
  left: 10px;
  background-color: #FFFFFF;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-box input:focus + div.label,
.input-box select:focus + div.label,
.input-box textarea:focus + div.label {
  color: var(--input-label);
}
/*# sourceMappingURL=input.css.map */