Connected.Components/Styles/components/_input.scss

.input {
    position: relative;
    color: var(--palette-text-primary);
    cursor: text;
    display: inline-flex;
    font-size: 1rem;
    box-sizing: border-box;
    align-items: center;
    font-weight: 400;
    line-height: 1.1876em;
    letter-spacing: 0.00938em;

    &.input-full-width {
        width: 100%;
    }

    &.disabled {
        color: var(--palette-text-disabled);
        cursor: default;
    }

    &.disabled > .input-adornment {
        color: var(--palette-text-disabled);
        pointer-events: none;
    }

    &.input-underline {
        &:before {
            left: 0;
            right: 0;
            bottom: 0;
            content: "\00a0";
            position: absolute;
            transition: border-bottom 0.2s, background-color 0.2s;
            border-bottom: 1px solid var(--palette-lines-inputs);
            pointer-events: none;
        }

        &:hover:not(.disabled):before {
            border-bottom: 1px solid var(--palette-action-default);
        }

        &:after {
            left: 0;
            right: 0;
            bottom: 0;
            content: "";
            position: absolute;
            transform: scaleX(0);
            transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
            border-bottom: 2px solid var(--palette-primary);
            pointer-events: none;
        }

        &.disabled:before {
            border-bottom-style: dotted;
        }

        &.input-error:after {
            transform: scaleX(1);
            border-bottom-color: var(--palette-error);
        }
    }

    &.input-filled {
        position: relative;
        transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        background-color: rgba(0, 0, 0, 0.09);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;

        &:hover {
            background-color: rgba(0, 0, 0, 0.13);
        }

        &.focused {
            background-color: rgba(0, 0, 0, 0.09);
        }

        &.disabled {
            background-color: rgba(0, 0, 0, 0.12);
        }

        &.input-adorned-start {
            padding-left: 12px;
            padding-inline-start: 12px;
            padding-inline-end: unset;
        }

        &.input-adorned-end {
            padding-right: 12px;
            padding-inline-end: 12px;
            padding-inline-start: unset;
        }

        &.input-underline {
            &:before {
                left: 0;
                right: 0;
                bottom: 0;
                content: "\00a0";
                position: absolute;
                transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                border-bottom: 1px solid var(--palette-lines-inputs);
                pointer-events: none;
            }

            &:after {
                left: 0;
                right: 0;
                bottom: 0;
                content: "";
                position: absolute;
                transform: scaleX(0);
                transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
                border-bottom: 2px solid var(--palette-primary);
                pointer-events: none;
            }

            &:hover:before {
                border-bottom: 1px solid var(--palette-action-default);
            }

            &.disabled:before {
                border-bottom-style: dotted;
            }

            &.input-error:after {
                transform: scaleX(1);
                border-bottom-color: var(--palette-error);
            }
        }
    }

    &.input-outlined {
        position: relative;
        border-width: 0px;

        & .input-outlined-border {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            height: 100%;
            text-align: start;
            pointer-events: none;
            border-radius: var(--default-borderradius);
            border-color: var(--palette-lines-inputs);
            border-width: 1px;
            border-style: solid;
            transition: border-width,border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        }

        &:not(.disabled):not(:focus-within):hover .input-outlined-border {
            border-color: var(--palette-action-default);
        }

        &:focus-within .input-outlined-border {
            border-width: 2px;
            border-color: var(--palette-primary);
        }

        &.disabled .input-outlined-border {
            border-color: var(--palette-action-disabled);
        }

        &.input-adorned-start {
            padding-left: 14px;
            padding-inline-start: 14px;
            padding-inline-end: unset;
        }

        &.input-adorned-end {
            padding-right: 14px;
            padding-inline-end: 14px;
            padding-inline-start: unset;
        }
    }
}

.input-error .input-outlined-border {
    border-color: var(--palette-error) !important;
}

.input:focus-within.input-underline:after {
    transform: scaleX(1);
}

.input > input, div.input-slot {
    &.input-root {
        font: inherit;
        color: currentColor;
        width: 100%;
        border: 0;
        height: 1.1876em;
        margin: 0;
        display: block;
        padding: 6px 0 7px;
        min-width: 0;
        background: none;
        position: relative;
        box-sizing: content-box;
        letter-spacing: inherit;
        -webkit-tap-highlight-color: transparent;

        @include inputplaceholder {
            color: currentColor;
            opacity: 0.42;
            transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        }

        &.input-root-margin-dense {
            padding-top: 3px;
        }

        &.input-root-multiline {
            height: auto;
            resize: none;
            padding: 0;
        }

        &.input-root-type-search {
            -moz-appearance: textfield;
            -webkit-appearance: textfield;
        }

        &:focus {
            outline: 0;
        }

        &:invalid {
            box-shadow: none;
        }

        &:disabled {
            opacity: 1;
        }

        &.input-root-filled {
            padding: 27px 12px 10px;

            &.input-root-margin-dense {
                padding-top: 23px;
                padding-bottom: 6px;
            }

            &:-webkit-autofill {
                border-top-left-radius: inherit;
                border-top-right-radius: inherit;
            }

            &.input-root-hidden-label {
                padding-top: 18px;
                padding-bottom: 19px;

                &.input-root-margin-dense {
                    padding-top: 10px;
                    padding-bottom: 11px;
                }
            }

            &.input-root-multiline {
                padding: 0;
            }

            &.input-root-adorned-start {
                padding-left: 0;
                padding-inline-start: 0;
                padding-inline-end: 12px;
            }

            &.input-root-adorned-end {
                padding-right: 0;
                padding-inline-end: 0;
                padding-inline-start: 12px;
            }
        }
    }

    &.input-root-outlined {
        padding: 18.5px 14px;


        &.input-root:-webkit-autofill {
            border-radius: inherit;
        }

        &.input-root-margin-dense {
            padding-top: 10.5px;
            padding-bottom: 10.5px;
        }

        &.input-root-adorned-start {
            padding-left: 0;
            padding-inline-start: 0;
            padding-inline-end: 14px;
        }

        &.input-root-adorned-end {
            padding-right: 0;
            padding-inline-end: 0;
            padding-inline-start: 14px;
        }
    }

    &::-ms-reveal, &::-ms-clear {
        display: none !important;
    }
}

.input > textarea {
  &.input-root {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: auto;
    margin: 6px 0 7px;
    padding: 0;
    display: block;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    letter-spacing: inherit;
    -webkit-tap-highlight-color: transparent;
    height: auto;
    resize: none;
    cursor: auto;

    @include inputplaceholder {
      color: currentColor;
      opacity: 0.42;
      transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

    &.input-root-margin-dense {
      margin-top: 3px;
    }

    &.input-root-type-search {
      -moz-appearance: textfield;
      -webkit-appearance: textfield;
    }

    &:focus {
      outline: 0;
    }

    &:invalid {
      box-shadow: none;
    }

    &:disabled {
      opacity: 1;
    }

    &.input-root-filled {
      margin: 27px 12px 10px;

      &.input-root-margin-dense {
        margin-top: 23px;
        margin-bottom: 6px;
      }

      &:-webkit-autofill {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }

      &.input-root-hidden-label {
        margin-top: 18px;
        margin-bottom: 19px;

        &.input-root-margin-dense {
          margin-top: 10px;
          margin-bottom: 11px;
        }
      }

      &.input-root-adorned-start {
        margin-left: 0;
        margin-inline-start: 0;
        margin-inline-end: 12px;

      }

      &.input-root-adorned-end {
        margin-right: 0;
        margin-inline-end: unset;
        margin-inline-start: 12px;
      }
    }

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      z-index: 1;
      cursor: crosshair;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--palette-lines-inputs);
      border-radius: 1px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  &.input-root-outlined {
    margin: 18.5px 14px;


    &.input-root:-webkit-autofill {
      border-radius: inherit;
    }

    &.input-root-margin-dense {
      margin-top: 10.5px;
      margin-bottom: 10.5px;
    }

    &.input-root-adorned-start {
      margin-left: 0;
      margin-inline-start: 0;
      margin-inline-end: 14px;
    }

    &.input-root-adorned-end {
      margin-right: 0;
      margin-inline-end: 0;
      margin-inline-start: 14px;
    }
  }
}

.input-adornment {
  height: 0.01em;
  display: flex;
  max-height: 2em;
  align-items: center;
  white-space: nowrap;
}

.input-adornment-start {
  &.input-root-filled-shrink {
    margin-top: 16px;
  }
}

.input-adornment-start {
    margin-right: 8px;
    margin-inline-end: 8px;
    margin-inline-start: unset;
}

.input-adornment-end {
  margin-left: 8px;
  margin-inline-start: 8px;
  margin-inline-end: unset;
}

.input-number-control.input-showspin .input-adornment-end {
    margin-right: 12px;
    margin-inline-end: 12px;
    margin-inline-start: unset;
}

.input-number-control.input-showspin .input-underline:not(.input-filled) .input-adornment-end {
    margin-right: 24px;
    margin-inline-end: 24px;
    margin-inline-start: unset;
}

.input-adornment-disable-pointerevents {
  pointer-events: none;
}

.range-input-separator {
    visibility: hidden;
    margin: 0 4px;
}

.input:focus-within .range-input-separator {
    visibility: visible;
}

.picker .shrink .range-input-separator {
    visibility: visible;
}