text-input {
    display: block;
    margin: 1.4rem 0;
}
text-input .input {
        /* margin: 1.4rem 0; */
        position: relative;
    }
:is(text-input .input) label {
            color: var(--gray-text, #999999);
            margin-top: 0;
            font-size: 1.2rem;
            position: absolute;
            pointer-events: none;
            transition: 0.2s ease all;
            left: 0.8rem;
            font-size: 1.2rem;
        }
:is(text-input .input) input {
            border: 2px solid black;
            border-radius: var(--radius, 4px);
            padding-bottom: .4rem;
            padding-top: .5rem;
            font-size: 1.2rem;
            padding: 10px 10px 10px 5px;
            display: block;
        }
:is(:is(text-input .input) input):disabled {
                opacity: 0.4;
            }
:is(:is(text-input .input) input):disabled:hover {
                    cursor: not-allowed;
                }
:is(:is(text-input .input) input):disabled ~ label {
                    opacity: 0.4;
                }
:is(:is(text-input .input) input):focus ~ label {
                    color: black;
                    left: 0.5rem;
                }
:is(:is(text-input .input) input):focus {
    
                border-bottom: 2px solid black;
            }
:is(:is(text-input .input) input):not(:placeholder-shown) ~ label {
                color: black;
                left: 0.5rem;
            }
:is(text-input .input) input {

            /* this is a hack to fix the input width
            don't know why we need this */
            width: calc(100% - 1rem);
        }
:is(:is(text-input .input) input):focus {
                outline: none;
            }
:is(:is(text-input .input) input):focus ~ label {
                    color: black;
                    left: 0.5rem;
                }
:is(:is(text-input .input) input):focus{
    
                border-bottom: 2px solid black;
            }
/* When input is...
                1. NOT empty
                2. NOT in focus
                3. NOT valid
            */
:is(:is(text-input .input) input):invalid:not(:focus):not(:placeholder-shown) {
                border-color: var(--text-input-error-border, red);
            }
:is(:is(text-input .input) input):invalid:not(:focus):not(:placeholder-shown) ~ .requirements {
                    max-height: 200px;
                    padding: 0 30px 20px 50px;
                }
:is(text-input .input) .requirements {
            padding: 0 30px 0 50px;
            max-height: 0;
            transition: 0.28s;
            overflow: hidden;
            color: var(--text-input-error-text);
            font-style: italic;
        }
:is(text-input .input) label {
            color: #5f5f5f;
            font-size: 18px;
            font-weight: normal;
            position: absolute;
            pointer-events: none;
            left: 8px;
            top: 14px;
            transition: 0.2s ease all;
        }
/* this part makes the `label` float */
/* input:valid ~ label, */
:is(text-input .input) input:focus ~ label,:is(text-input .input) input:not(:placeholder-shown) ~ label {
            top: -18px;
            font-size: 14px;
            color: black;
        }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxjQUFjO0lBQ2QsZ0JBQWdCO0FBa0hwQjtBQWhISTtRQUNJLHNCQUFzQjtRQUN0QixrQkFBa0I7SUE2R3RCO0FBM0dJO1lBQ0ksZ0NBQWdDO1lBQ2hDLGFBQWE7WUFDYixpQkFBaUI7WUFDakIsa0JBQWtCO1lBQ2xCLG9CQUFvQjtZQUNwQix5QkFBeUI7WUFDekIsWUFBWTtZQUNaLGlCQUFpQjtRQUNyQjtBQUVBO1lBQ0ksdUJBQXVCO1lBQ3ZCLGlDQUFpQztZQUNqQyxxQkFBcUI7WUFDckIsa0JBQWtCO1lBQ2xCLGlCQUFpQjtZQUNqQiwyQkFBMkI7WUFDM0IsY0FBYztRQTBEbEI7QUF4REk7Z0JBQ0ksWUFBWTtZQVNoQjtBQVBJO29CQUNJLG1CQUFtQjtnQkFDdkI7QUFFQTtvQkFDSSxZQUFZO2dCQUNoQjtBQUlBO29CQUNJLFlBQVk7b0JBQ1osWUFBWTtnQkFDaEI7QUFKSjs7Z0JBTUksOEJBQThCO1lBQ2xDO0FBRUE7Z0JBQ0ksWUFBWTtnQkFDWixZQUFZO1lBQ2hCO0FBakNKOztZQW1DSTt5Q0FDNkI7WUFDN0Isd0JBQXdCO1FBNEI1QjtBQTFCSTtnQkFDSSxhQUFhO1lBQ2pCO0FBR0k7b0JBQ0ksWUFBWTtvQkFDWixZQUFZO2dCQUNoQjtBQUpKOztnQkFNSSw4QkFBOEI7WUFDbEM7QUFFQTs7OzthQUlDO0FBQ0Q7Z0JBQ0ksaURBQWlEO1lBTXJEO0FBSkk7b0JBQ0ksaUJBQWlCO29CQUNqQix5QkFBeUI7Z0JBQzdCO0FBSVI7WUFDSSxzQkFBc0I7WUFDdEIsYUFBYTtZQUNiLGlCQUFpQjtZQUNqQixnQkFBZ0I7WUFDaEIsbUNBQW1DO1lBQ25DLGtCQUFrQjtRQUN0QjtBQUVBO1lBQ0ksY0FBYztZQUNkLGVBQWU7WUFDZixtQkFBbUI7WUFDbkIsa0JBQWtCO1lBQ2xCLG9CQUFvQjtZQUNwQixTQUFTO1lBQ1QsU0FBUztZQUNULHlCQUF5QjtRQUM3QjtBQUVBLHNDQUFzQztBQUN0Qyx5QkFBeUI7QUFDekI7WUFHSSxVQUFVO1lBQ1YsZUFBZTtZQUNmLFlBQVk7UUFDaEIiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsidGV4dC1pbnB1dCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgbWFyZ2luOiAxLjRyZW0gMDtcblxuICAgICYgLmlucHV0IHtcbiAgICAgICAgLyogbWFyZ2luOiAxLjRyZW0gMDsgKi9cbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgICAgICYgbGFiZWwge1xuICAgICAgICAgICAgY29sb3I6IHZhcigtLWdyYXktdGV4dCwgIzk5OTk5OSk7XG4gICAgICAgICAgICBtYXJnaW4tdG9wOiAwO1xuICAgICAgICAgICAgZm9udC1zaXplOiAxLjJyZW07XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IDAuMnMgZWFzZSBhbGw7XG4gICAgICAgICAgICBsZWZ0OiAwLjhyZW07XG4gICAgICAgICAgICBmb250LXNpemU6IDEuMnJlbTtcbiAgICAgICAgfVxuXG4gICAgICAgICYgaW5wdXQge1xuICAgICAgICAgICAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIDRweCk7XG4gICAgICAgICAgICBwYWRkaW5nLWJvdHRvbTogLjRyZW07XG4gICAgICAgICAgICBwYWRkaW5nLXRvcDogLjVyZW07XG4gICAgICAgICAgICBmb250LXNpemU6IDEuMnJlbTtcbiAgICAgICAgICAgIHBhZGRpbmc6IDEwcHggMTBweCAxMHB4IDVweDtcbiAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuXG4gICAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAwLjQ7XG5cbiAgICAgICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAmfmxhYmVsIHtcbiAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICAgICAgJn5sYWJlbCB7XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgICAgICAgICAgICAgICAgbGVmdDogMC41cmVtO1xuICAgICAgICAgICAgICAgIH1cbiAgICBcbiAgICAgICAgICAgICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6bm90KDpwbGFjZWhvbGRlci1zaG93bil+bGFiZWwge1xuICAgICAgICAgICAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgICAgICAgICAgICBsZWZ0OiAwLjVyZW07XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC8qIHRoaXMgaXMgYSBoYWNrIHRvIGZpeCB0aGUgaW5wdXQgd2lkdGhcbiAgICAgICAgICAgIGRvbid0IGtub3cgd2h5IHdlIG5lZWQgdGhpcyAqL1xuICAgICAgICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtIDFyZW0pO1xuXG4gICAgICAgICAgICAmOmZvY3VzIHtcbiAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOmZvY3Vze1xuICAgICAgICAgICAgICAgICZ+bGFiZWwge1xuICAgICAgICAgICAgICAgICAgICBjb2xvcjogYmxhY2s7XG4gICAgICAgICAgICAgICAgICAgIGxlZnQ6IDAuNXJlbTtcbiAgICAgICAgICAgICAgICB9XG4gICAgXG4gICAgICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkIGJsYWNrO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAvKiBXaGVuIGlucHV0IGlzLi4uXG4gICAgICAgICAgICAgICAgMS4gTk9UIGVtcHR5XG4gICAgICAgICAgICAgICAgMi4gTk9UIGluIGZvY3VzXG4gICAgICAgICAgICAgICAgMy4gTk9UIHZhbGlkXG4gICAgICAgICAgICAqL1xuICAgICAgICAgICAgJjppbnZhbGlkOm5vdCg6Zm9jdXMpOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHtcbiAgICAgICAgICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLXRleHQtaW5wdXQtZXJyb3ItYm9yZGVyLCByZWQpO1xuXG4gICAgICAgICAgICAgICAgJiB+IC5yZXF1aXJlbWVudHMge1xuICAgICAgICAgICAgICAgICAgICBtYXgtaGVpZ2h0OiAyMDBweDtcbiAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMCAzMHB4IDIwcHggNTBweDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICAucmVxdWlyZW1lbnRzIHtcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMzBweCAwIDUwcHg7XG4gICAgICAgICAgICBtYXgtaGVpZ2h0OiAwO1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogMC4yOHM7XG4gICAgICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgICAgICAgY29sb3I6IHZhcigtLXRleHQtaW5wdXQtZXJyb3ItdGV4dCk7XG4gICAgICAgICAgICBmb250LXN0eWxlOiBpdGFsaWM7XG4gICAgICAgIH1cblxuICAgICAgICAmIGxhYmVsIHtcbiAgICAgICAgICAgIGNvbG9yOiAjNWY1ZjVmO1xuICAgICAgICAgICAgZm9udC1zaXplOiAxOHB4O1xuICAgICAgICAgICAgZm9udC13ZWlnaHQ6IG5vcm1hbDtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgICAgICAgbGVmdDogOHB4O1xuICAgICAgICAgICAgdG9wOiAxNHB4O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogMC4ycyBlYXNlIGFsbDtcbiAgICAgICAgfVxuICAgICAgICBcbiAgICAgICAgLyogdGhpcyBwYXJ0IG1ha2VzIHRoZSBgbGFiZWxgIGZsb2F0ICovXG4gICAgICAgIC8qIGlucHV0OnZhbGlkIH4gbGFiZWwsICovXG4gICAgICAgICYgaW5wdXQ6Zm9jdXMgfiBsYWJlbCxcbiAgICAgICAgLyogZmxvYXQgd2hlbiBpdCdzIG5vdCBlbXB0eSAqL1xuICAgICAgICAmIGlucHV0Om5vdCg6cGxhY2Vob2xkZXItc2hvd24pIH4gbGFiZWwge1xuICAgICAgICAgICAgdG9wOiAtMThweDtcbiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgICAgICAgIGNvbG9yOiBibGFjaztcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ== */password-field {
    display: flex;
    margin: 1.4rem 0;
    width: 100%;
}
password-field button {
        border: none;
        background-color: transparent;
        height: 42px;
    }
password-field .pw-visibility {
        position: relative;
        top: 25px;
    }
password-field svg {
        position: relative;
        top: 2px;
        width: 1.8rem;
    }
password-field text-input {
        width: 100%;
    }
:is(:is(password-field text-input) .input) input {
                padding-right: 3.6rem;
            }
body {
    font-family: sans-serif;
}

button {
    cursor: pointer;
}

password-field {
    width: 25rem;
}

:is(password-field text-input) input:not(:placeholder-shown) ~ label {
            top: -16px;
        }