.prs-input { appearance: none; padding: 0.1875rem 1rem; border: 1px solid var(--prs-c-gray); width: 100%; min-height: 2rem; background: var(--prs-c-white); color: var(--prs-c-gray-900); text-align: left; font-weight: var(--prs-fw-ui-md); font-size: var(--prs-fz-ui-md); line-height: var(--prs-fl-ui-md); flex-shrink: 1; display: block; border-radius: var(--prs-radius-input); transition-property: var(--prs-transition-property); transition-timing-function: var(--prs-transition-timing); transition-duration: var(--prs-transition-duration); } /* number */ .prs-input:where([type="number"]) { padding-right: 0.1875rem; } /* color */ .prs-input:where([type="color"]) { padding: 0 0.1875rem; } /* when used as a container */ .prs-input:where(:not(input)) { display: flex; align-items: center; gap: 1rem; } .prs-input :where(input, select, textarea) { appearance: none; flex-grow: 1; } .prs-input :where(input, select, textarea):last-child, .prs-input :where(input[type="number"]) { margin-inline-end: -1rem; } .prs-input > .prs-label-text { padding: 0; color: var(--prs-c-gray-600); line-height: normal; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; justify-content: center; user-select: none; } .prs-input > .prs-label-text:not(:first-child,:last-child) { padding-inline: 1rem; border-inline: 1px solid var(--prs-c-gray-300); } .prs-input > .prs-label-text + .prs-label-text:not(:first-child,:last-child) { padding-inline: 0 1rem; border-inline-start: 0 none; } .prs-input > .prs-label-text:first-child { padding-inline-end: 1rem; border-inline-end: 1px solid var(--prs-c-gray-300); } .prs-input > .prs-label-text:last-child { padding-inline-start: 1rem; border-inline-start: 1px solid var(--prs-c-gray-300); } .prs-input .prs-label-text svg,.prs-input .prs-label-text .icon,.prs-input .prs-label-text iconify-icon { font-size: 1rem; } /* ghost */ .prs-input-ghost { border-color: transparent; background-color: transparent; } /* textarea */ .prs-input:where(textarea) { resize: vertical; } /* file */ .prs-input:where([type="file"]) { padding: 0; padding-right: 1rem; } .prs-input::file-selector-button { appearance: none; padding: .25rem 1rem; border-width: var(--prs-border-btn); border-style: solid; border-color: transparent; font-size: 1rem; font-style: normal; line-height: 1.375rem; background-color: var(--prs-c-primary); color: var(--prs-c-white); text-align: center; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; user-select: none; border-radius: inherit; transition-property: var(--prs-transition-property); transition-timing-function: var(--prs-transition-timing); transition-duration: var(--prs-transition-duration); } .prs-input:hover::file-selector-button { background-color: var(--prs-c-primary-600); } /* placeholder */ .prs-input::placeholder,.prs-input ::placeholder { color: var(--prs-c-gray-600); font-style: italic; } /* focus */ .prs-input:focus,.prs-input:where(:not([type="range"])):focus-within,.prs-input_focus:where(:not([type="range"])) { outline: 2px solid var(--prs-c-primary); outline-offset: 1px; } .prs-input :focus { outline: 0 none; } /* invalid */ .prs-input:user-invalid,.prs-input:has(:user-invalid),.prs-input_invalid { border-color: var(--prs-c-danger); background-color: var(--prs-c-danger-100); } /* disabled */ .prs-input:disabled,.prs-input_disabled { border-color: var(--prs-c-gray); color: var(--prs-c-gray-600); background-color: var(--prs-c-gray-200); cursor: not-allowed; } .prs-input:disabled::placeholder,.prs-input_disabled::placeholder { color: var(--prs-c-gray-400); } .prs-input:where([type="range"]):disabled { --filler: var(--prs-c-gray-400); background-color: transparent; cursor: not-allowed; } .prs-input:disabled::file-selector-button, .prs-input_disabled::file-selector-button { background-color: var(--prs-c-gray-400); color: white; cursor: not-allowed; }