/** px-input styles */
.px-input { /** $inuit-enable-btn--primary  : true; $inuit-enable-btn--tertiary : true; $inuit-enable-btn--small    : true; $inuit-enable-btn--large    : true; $inuit-enable-btn--huge     : true; $inuit-enable-btn--icon     : true; $inuit-enable-btn--bare     : true; $inuit-enable-btn--disabled : true; @import 'px-buttons-design/_objects.buttons.scss'; */ /*------------------------------------*    #PX-COLORS-DESIGN
\*------------------------------------*/ /** Neutral Palette (gray20 is darkest, gray1 is lightest) */ /** Define grey = gray to avoid dev typos */ /** Actionable Palette */ /** Selection Palette */ /** Dark Actionable Palette */ /** Alerts and Status */ /** Data Visualization */ /** Orange */ /** Yellow */ /** Yellow Green */ /** Green */ /** Teal */ /** Aqua */ /** Cyan */ /** Blue */ /** Violet */ /** Purple */ /** Pink */ /** Red */ /** Brown */ /** Gray */ /** Define grey = gray to avoid dev typos */ /** Salmon */ /** Styles for one line forms. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.px-input fieldset { margin: 0; }

.px-input fieldset, .px-input fieldset legend { border: 0; padding: 0; }

.px-input legend { margin-bottom: 1.33333rem; font-weight: bold; }

.px-input .form-field { margin-bottom: 1.33333rem; }

.px-input .form-field:last-child { margin-bottom: 2.66667rem; }

.px-input label { display: block; margin-bottom: 0.26667rem; cursor: pointer; text-transform: uppercase; font-size: 12px; color: var(--px-input-label-text-color, #677e8c); letter-spacing: var(--px-headings-letter-spacing, 0.3px); }

.px-input .label--inline { display: inline-block; margin-bottom: 0; }

.px-input .label--inline + .text-input { margin-left: 0.66667rem; }

.px-input .text-input, .px-input textarea, .px-input select { font: inherit; outline: 0; background-color: var(--px-input-background-color, transparent); -webkit-transition: background .4s, border-color .4s, color .4s; transition: background .4s, border-color .4s, color .4s; }

.px-input .text-input:disabled, .px-input .text-input[readonly], .px-input textarea:disabled, .px-input textarea[readonly], .px-input select:disabled, .px-input select[readonly] { border-color: var(--px-input-border-color--disabled, rgba(0, 0, 0, 0.2)); color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); cursor: not-allowed; background-color: var(--px-input-background-color--disabled, transparent); }

.px-input .text-input:hover, .px-input textarea:hover, .px-input select:hover { background-color: var(--px-input-background-color--hover, #d8e0e5); }

.px-input .text-input::-webkit-input-placeholder, .px-input textarea::-webkit-input-placeholder, .px-input select::-webkit-input-placeholder { color: var(--px-input-text-color--placeholder, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:-ms-input-placeholder, .px-input textarea:-ms-input-placeholder, .px-input select:-ms-input-placeholder { color: var(--px-input-text-color--placeholder, rgba(0, 0, 0, 0.3)); }

.px-input .text-input::-ms-input-placeholder, .px-input textarea::-ms-input-placeholder, .px-input select::-ms-input-placeholder { color: var(--px-input-text-color--placeholder, rgba(0, 0, 0, 0.3)); }

.px-input .text-input::placeholder, .px-input textarea::placeholder, .px-input select::placeholder { color: var(--px-input-text-color--placeholder, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:focus::-webkit-input-placeholder, .px-input textarea:focus::-webkit-input-placeholder, .px-input select:focus::-webkit-input-placeholder { color: var(--px-input-text-color--placeholder--focused, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:focus:-ms-input-placeholder, .px-input textarea:focus:-ms-input-placeholder, .px-input select:focus:-ms-input-placeholder { color: var(--px-input-text-color--placeholder--focused, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:focus::-ms-input-placeholder, .px-input textarea:focus::-ms-input-placeholder, .px-input select:focus::-ms-input-placeholder { color: var(--px-input-text-color--placeholder--focused, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:focus::placeholder, .px-input textarea:focus::placeholder, .px-input select:focus::placeholder { color: var(--px-input-text-color--placeholder--focused, rgba(0, 0, 0, 0.3)); }

.px-input .text-input:disabled::-webkit-input-placeholder, .px-input textarea:disabled::-webkit-input-placeholder, .px-input select:disabled::-webkit-input-placeholder { color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); }

.px-input .text-input:disabled:-ms-input-placeholder, .px-input textarea:disabled:-ms-input-placeholder, .px-input select:disabled:-ms-input-placeholder { color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); }

.px-input .text-input:disabled::-ms-input-placeholder, .px-input textarea:disabled::-ms-input-placeholder, .px-input select:disabled::-ms-input-placeholder { color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); }

.px-input .text-input:disabled::placeholder, .px-input textarea:disabled::placeholder, .px-input select:disabled::placeholder { color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); }

.px-input .text-input { height: 2em; width: 100%; border: none; border-radius: 0; border-bottom: 1px solid var(--px-input-border-color--outer, #889aa5); padding: 0 0.33333rem; color: var(--px-input-text-color, #2c404c); }

.px-input .text-input:focus { border-color: var(--px-input-border-color--outer--focused, #007acc); background-color: var(--px-input-background-color--focused, #eefbff); color: var(--px-input-text-color--focused, inherit); }

.px-input .text-input + [type=checkbox], .px-input .text-input + [type=radio] { margin-left: 1.33333rem; }

.px-input .text-input + .label--inline { margin-left: 0.66667rem; }

.px-input .text-input::-webkit-input-placeholder { padding-top: 1px; }

.px-input .text-input:-ms-input-placeholder { padding-top: 1px; }

.px-input .text-input::-ms-input-placeholder { padding-top: 1px; }

.px-input .text-input::placeholder { padding-top: 1px; }

.px-input .text-input::-ms-clear { display: none; }

.px-input textarea { width: 100%; color: var(--px-input-text-color, #2c404c); overflow: auto; min-height: calc(120px + 0.66667rem); padding: 0.33333rem 0.66667rem; resize: vertical; border: 1px solid var(--px-input-border-color--outer, #889aa5); border-radius: 0; }

.px-input textarea:focus { color: var(--px-input-text-color--focused, inherit); background-color: var(--px-input-textarea-background--focused, #eefbff); border: 1px solid var(--px-input-border-color--outer--focused, #007acc); }

.px-input select { width: auto; padding: 0 3em 0 1em; -webkit-box-shadow: none; box-shadow: none; height: calc(2em); cursor: pointer; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%232c404c%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: calc(100% - 0.66667rem) 37.5%; color: var(--px-select-text-color, #2c404c); background-color: var(--px-select-background-color, #d8e0e5); border: var(--px-select-border-color, transparent); border-radius: 0; -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; }

.px-input select:hover { background-color: var(--px-select-background-color--hover, #a3b5bf); }

.px-input select:active { background-color: var(--px-select-background-color--active, #889aa5); }

.px-input select:disabled, .px-input select[readonly] { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%20658%201024%22%3E%3Cpath%20fill%3D%22%23c5d1d8%22%20d%3D%22M614.286%20420.571q0%207.429-5.714%2013.143l-266.286%20266.286q-5.714%205.714-13.143%205.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714%2013.143-5.714t13.143%205.714l224.571%20224.571%20224.571-224.571q5.714-5.714%2013.143-5.714t13.143%205.714l28.571%2028.571q5.714%205.714%205.714%2013.143z%22%2F%3E%3C%2Fsvg%3E"); color: var(--px-input-text-color--disabled, rgba(0, 0, 0, 0.2)); }

.px-input select[multiple] { padding: 0.33333rem; cursor: pointer; border: none; background: var(--px-multiselect-background-color, #ebeff2); }

.px-input select::-ms-expand { display: none; }

@-moz-document url-prefix() { .px-input select { padding-top: .4em; padding-bottom: .4em; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .px-input select { padding-top: .4em; padding-bottom: .4em; } }

.px-input .text-input + [type=submit], .px-input .text-input [type=cancel], .px-input .label--inline + [type=submit], .px-input .label--inline [type=cancel] { margin-left: 1.33333rem; }

.px-input [type=checkbox], .px-input [type=radio] { margin: 0; padding: 0; font-size: 1.05em; cursor: pointer; outline: none; }

.px-input [type=checkbox][disabled], .px-input [type=radio][disabled] { cursor: not-allowed; }

.px-input [type=checkbox][disabled] + .label--inline, .px-input [type=radio][disabled] + .label--inline { cursor: not-allowed; }

.px-input [type=checkbox] + .label--inline { padding-left: 5px; }

.px-input [type=radio] + .label--inline { padding-left: 3px; }

.px-input .form-field__help { display: inline-block; margin-top: 0; margin-left: 0.33333rem; font-size: 12px; line-height: inherit; color: var(--px-input-text-color--help, #677e8c); }

.px-input .input--tiny { max-width: 7.06667rem; }

.px-input .input--small { max-width: 14.13333rem; }

.px-input .input--regular { max-width: 21.2rem; }

.px-input .input--large { max-width: 28.26667rem; }

.px-input .input--huge { max-width: 35.33333rem; }

.px-input .form-field--inline .text-input { margin-bottom: 1.33333rem; }

.px-input .form-field--inline:last-child { margin-bottom: 1.33333rem; }

.px-input .validation-warning { color: var(--px-validation-warning-text-color, #ff8b3a); }

.px-input .validation-error { color: var(--px-validation-error-text-color, #f34336); }

.px-input .validation-success { color: var(--px-validation-success-text-color, #7fae1b); }

.px-input .text-input.validation-warning { border-color: var(--px-validation-warning-text-color, #ff8b3a); background-color: var(--px-validation-warning-background-color, #fff0e6); color: var(--px-input-text-color--focused, inherit); }

.px-input .text-input.validation-error { border-color: var(--px-validation-error-text-color, #f34336); background-color: var(--px-validation-error-background-color, #ffecec); color: var(--px-input-text-color--focused, inherit); }

.px-input .text-input.validation-success { border-color: var(--px-validation-success-text-color, #7fae1b); background-color: var(--px-validation-success-background-color, #ecffee); color: var(--px-input-text-color--focused, inherit); }

.px-input .text-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: auto; }
