label.input {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    background-color: white;
    border: solid 1px var(--color-grey);
    border-radius: var(--border-radius-input);
    padding: 24px 8px 6px 8px;
    cursor: text;
    transition: .2s;

    span {
        position: absolute;
        top: 17px;
        left: 15px;
        color: var(--color-text);
        transition: .2s;
    }

    input:focus-within + span, :not(input:placeholder-shown) + span {
        top: 8px;
        left: 10px;
        color: var(--color-primary);
        font-size: var(--font-size-label);
    }

    input:focus-within + span:after, :not(input:placeholder-shown) + span:after {
        content: ":";
    }

    input {
        width: 100%;
        box-sizing: border-box;
        font-family: var(--font-family), serif;
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size-text);
        color: var(--color-text);
        border: none;
        outline: none;
    }
}

label.input:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--color-primary) 0 0 5px 0;
}

label:has(input.invalid) {
    border-color: var(--color-red);
    box-shadow: var(--color-red) 0 0 5px 0;
}

label.input.disabled {
    background-color: var(--color-grey);
    cursor: not-allowed;

    input:disabled {
        background-color: var(--color-grey);
        cursor: not-allowed;
    }
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    font-family: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}