.input {

    --self-background: var(--input-background);
    --self-forecolor: var(--input-forecolor);

    background: var(--self-background);
    color: var(--self-forecolor);

    padding: var(--input-padding);
    transition: all 0.2s;
    border-radius: var(--input-border-radius);

    outline: none;
    border: none;
    
    &:focus {
        --self-background: var(--input-hover-background);
        --self-forecolor: var(--input-hover-forecolor);
    }

    &::placeholder {
        color: invert(var(--self-forecolor));
    }

}

&::placeholder {
     color: #{"invert(var(--self-forecolor))"};
}