.input-properties {
    --input-color: var(--darkcolor);
    --input-bgcolor: var(--whitecolor);
    --input-disabled-bgcolor: var(--graycolor);
    --input-disabled-color: var(--lightgraycolor);
    --input-brcolor: var(--lightgraycolor);
    --input-disabled-brcolor: var(--graycolor);
    --input-focus-brcolor: var(--bluecolor);
    --input-focus-bgcolor: var(--input-bgcolor);
    --input-hover-brcolor: var(--orangecolor);
    --input-padding-inline: 0.5rem;
    --input-padding-block: 0.5rem;
    --input-border-radius: 0.5rem;
    --input-placeholder-color: var(--graycolor);
    --input-border-width: 2px;
}


.input {
    padding-inline: var(--input-padding-inline);
    padding-block: var(--input-padding-block);
    color: var(--input-color);
    background-color: var(--input-bgcolor);
    line-height: 1;
    outline: none;
    width: 100%;
    border: var(--input-border-width) solid var(--input-brcolor);
    border-radius: var(--input-border-radius);
    height: 100%;
    transition: 0.4s background-color;
}

    .input:disabled {
        border-color: var(--input-disabled-brcolor);
        color: var(--input-disabled-color);
        background-color: var(--input-disabled-bgcolor);
        user-select: none;
        pointer-events: none;
    }

    .input:not(:disabled):not(:focus):is(:hover, :active) {
        border-color: var(--input-hover-brcolor);
    }

    .input:not(:disabled):focus {
        border-color: var(--input-focus-brcolor);
        background-color: var(--input-focus-bgcolor);
    }


    .input::placeholder {   
        color: var(--input-placeholder-color);
    }