:root {
    --filter-font-family : "Tahoma";
    --filter-font-size : 1.5rem;
    
    --filter-text-color : white;
    
    --filter-text-required-color : black;
    --filter-text-excluded-color : white;
    --filter-text-allowed-color : black;
    --filter-text-active-required-color : black;
    --filter-text-active-excluded-color : white;
    --filter-text-active-allowed-color : black;
    --filter-text-hover-required-color : black;
    --filter-text-hover-excluded-color : white;
    --filter-text-hover-allowed-color : black;
    
    --filter-bg-color : black;
    
    --filter-bg-required-color : hsl(100 100 50);
    --filter-bg-excluded-color : hsl(0 100 50);
    --filter-bg-allowed-color : hsl(120 0 95);
    --filter-bg-active-required-color : hsl(100 100 30);
    --filter-bg-active-excluded-color : hsl(0 100 30);
    --filter-bg-active-allowed-color : hsl(120 0 70);
    --filter-bg-hover-required-color : hsl(100 100 70);
    --filter-bg-hover-excluded-color : hsl(0 100 70);
    --filter-bg-hover-allowed-color : hsl(120 0 100);
    
    --filter-border-color : black;
    
    --filter-border-size : 0.125em;
    --filter-focus-border-size : 0.25em;
    --filter-margin : 0.125em;
    --filter-padding : 0.25em;
}

.classFilterElement {
    font-family : var(--filter-font-family);
    font-size : var(--filter-font-size);
    color : var(--filter-text-color);
    background-color : var(--filter-bg-color);
    cursor : pointer;
    margin : var(--filter-margin);
    padding : var(--filter-padding);
    border : var(--filter-border-color) var(--filter-border-size) solid;
    border-radius : var(--filter-padding);
}

.classFilterElement:focus {
    border : var(--filter-border-color) var(--filter-focus-border-size) solid;
    margin : var(--filter-margin) - var(--filter-border-size);
}

.classFilterElement[data-state = "Allowed"] {
    color : var(--filter-text-allowed-color);
    background-color : var(--filter-bg-allowed-color);
}

.classFilterElement[data-state = "Allowed"]:hover {
    color : var(--filter-text-hover-allowed-color);
    background-color : var(--filter-bg-hover-allowed-color);
}

.classFilterElement[data-state = "Allowed"]:active {
    color : var(--filter-text-active-allowed-color);
    background-color : var(--filter-bg-active-allowed-color);
}

.classFilterElement[data-state = "Required"] {
    color : var(--filter-text-required-color);
    background-color : var(--filter-bg-required-color);
}

.classFilterElement[data-state = "Required"]:hover {
    color : var(--filter-text-hover-required-color);
    background-color : var(--filter-bg-hover-required-color);
}

.classFilterElement[data-state = "Required"]:active {
    color : var(--filter-text-active-required-color);
    background-color : var(--filter-bg-active-required-color);
}

.classFilterElement[data-state = "Excluded"] {
    color : var(--filter-text-excluded-color);
    background-color : var(--filter-bg-excluded-color);
}

.classFilterElement[data-state = "Excluded"]:hover {
    color : var(--filter-text-hover-excluded-color);
    background-color : var(--filter-bg-hover-excluded-color);
}

.classFilterElement[data-state = "Excluded"]:active {
    color : var(--filter-text-active-excluded-color);
    background-color : var(--filter-bg-active-excluded-color);
}