.Input {
    position: relative;
    flex: 25% 1 0;
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-default);
    overflow: hidden;
    transition: var(--transition-default);
    outline: 0 solid var(--color-white);

    & label {
        position: absolute;
        left: .5rem;
        font-size: 1.5em;
        top: .7rem;
        transition: var(--transition-default);
    }

    & input {
        all: unset;
        width: calc(100% - 1rem);
        font-size: 1.2em;
        padding: 1.3rem .5rem .5rem .5rem;
        background: var(--color-white);

        &[type="number"] {
            text-align: right;
        }
    }

    &:has(input:invalid) {
        border-color: var(--color-red);
        outline-width: 2px;
    }

    & input:focus,
    & input:not(:placeholder-shown) {
        & + label {
            color: var(--color-main);
            font-size: 1em;
            top: .3rem;
            right: .5rem;
        }
    }
}