.Input {
    &.error {
        & .input-wrapper {
            border-color: var(--color-error);
            outline-width: 2px;
        }

        & span {
            color: var(--color-error);
        }
    }

    & span {
        font-size: .65em;
    }

    & .input-wrapper {
        position: relative;
        flex: 25% 1 0;
        border: 2px solid var(--color-main-dark);
        border-radius: var(--radius-default);
        overflow: hidden;
        transition: var(--transition-default);
        outline: 0 solid var(--color-lightest);

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

        & input {
            all: unset;
            width: calc(100% - 1rem);
            padding: 1.3rem .5rem .5rem .5rem;
            background: var(--color-lightest);

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

        & input:focus,
        & input:not(:placeholder-shown) {
            & + label {
                color: var(--color-main-dark);
            }
        }
    }
}