:root {
    --woof-sd-ie-clr_width: 60px;
    --woof-sd-ie-clr_height: 60px;

    --woof-sd-ie-clr_show_tooltip: none;
    --woof-sd-ie-clr_show_tooltip_count: block-inline;


    --woof-sd-ie-clr_color: #000000;
    --woof-sd-ie-clr_image: url();
    --woof-sd-ie-clr_hover_scale: 110;
    --woof-sd-ie-clr_selected_scale: 110;

    --woof-sd-ie-clr_border_radius: 50%;
    --woof-sd-ie-clr_border_width: 1px;
    --woof-sd-ie-clr_hover_border_width: 1px;
    --woof-sd-ie-clr_selected_border_width: 1px;
    --woof-sd-ie-clr_border_color: #79b8ff;
    --woof-sd-ie-clr_hover_border_color: #79b8ff;
    --woof-sd-ie-clr_selected_border_color: #79b8ff;
    --woof-sd-ie-clr_border_style: solid;
    --woof-sd-ie-clr_hover_border_style: dashed;
    --woof-sd-ie-clr_selected_border_style: dashed;

    --woof-sd-ie-clr_margin_right: 9px;
    --woof-sd-ie-clr_margin_bottom: 11px;

    --woof-sd-ie-clr_transition: 300s;


    --woof-sd-ie-clr_counter_show: inline-flex;
    --woof-sd-ie-clr_counter_width: 14px;
    --woof-sd-ie-clr_counter_height: 14px;
    --woof-sd-ie-clr_counter_side_padding: 0;

    --woof-sd-ie-clr_counter_top: 4px;
    --woof-sd-ie-clr_counter_right: 0;

    --woof-sd-ie-clr_counter_font_size: 9px;
    --woof-sd-ie-clr_counter_font_family: consolas;
    --woof-sd-ie-clr_counter_font_weight: 500;
    --woof-sd-ie-clr_counter_color: #477bff;

    --woof-sd-ie-clr_counter_bg_color: #ffffff;
    --woof-sd-ie-clr_counter_bg_image: url();

    --woof-sd-ie-clr_counter_border_width: 1px;
    --woof-sd-ie-clr_counter_border_radius: 50%;
    --woof-sd-ie-clr_counter_border_color: #477bff;
    --woof-sd-ie-clr_counter_border_style: solid;
}

.woof-sd-ie.woof-sd-ie-color{
    position: relative;
    display: inline-flex;

    margin-right: var(--woof-sd-ie-clr_margin_right) !important;
    margin-bottom: var(--woof-sd-ie-clr_margin_bottom) !important;
    
    box-sizing: border-box;
}

.woof-sd-ie.woof-sd-ie-color > input{
    display: none;
}

.woof-sd-ie.woof-sd-ie-color > label{
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    user-select: none !important;

    width: auto;
    min-width: var(--woof-sd-ie-clr_width) !important;
    height: var(--woof-sd-ie-clr_height) !important;

    margin: 0 0 0 0 !important;

    transition: all calc(var(--woof-sd-ie-clr_transition)/1000);

    
    border-color: var(--woof-sd-ie-clr_border_color) !important;
    border-style: var(--woof-sd-ie-clr_border_style) !important;
    border-width: var(--woof-sd-ie-clr_border_width) !important;
    border-radius: var(--woof-sd-ie-clr_border_radius);
    background-color: var(--woof-sd-ie-clr_color);
    background-image: var(--woof-sd-ie-clr_image);
    background-size: cover;

    width: 100%;
    max-width: var(--woof-sd-ie-clr_width) !important;
    min-width: fit-content;
}

.woof-sd-ie.woof-sd-ie-color:hover > label{
    border-color: var(--woof-sd-ie-clr_hover_border_color) !important;
    border-style: var(--woof-sd-ie-clr_hover_border_style) !important;
    border-width: var(--woof-sd-ie-clr_hover_border_width) !important;
    scale: calc(var(--woof-sd-ie-clr_hover_scale)/100);
}

.woof-sd-ie.woof-sd-ie-color:has(input:checked) > label{
    border-color: var(--woof-sd-ie-clr_selected_border_color) !important;
    border-style: var(--woof-sd-ie-clr_selected_border_style) !important;
    border-width: var(--woof-sd-ie-clr_selected_border_width) !important;
    scale: calc(var(--woof-sd-ie-clr_selected_scale)/100) !important;
}

.woof-sd-ie.woof-sd-ie-color > label:hover > span{
    zoom : 1;
    letter-spacing: normal;
    word-spacing: normal;

    border-color:  var(--woof-sd-ie-clr_hover_color) !important;

    transition: all calc(var(--woof-sd-ie-clr_transition)/1000);
}

.woof-sd-ie.woof-sd-ie-color .woof-sd-ie-count{
    user-select: none;
    display: var(--woof-sd-ie-clr_counter_show);
    flex-direction: row;
    justify-content: center;
    align-items: center;

    position: absolute;
    right: var(--woof-sd-ie-clr_counter_right);
    top: var(--woof-sd-ie-clr_counter_top);

    border: var(--woof-sd-ie-clr_counter_border_width) var(--woof-sd-ie-clr_counter_border_style) var(--woof-sd-ie-clr_counter_border_color);
    border-radius: var(--woof-sd-ie-clr_counter_border_radius);

    min-width: var(--woof-sd-ie-clr_counter_width);
    min-height: var(--woof-sd-ie-clr_counter_height);

    padding-left: var(--woof-sd-ie-clr_counter_side_padding);
    padding-right: var(--woof-sd-ie-clr_counter_side_padding);

    font-size: var(--woof-sd-ie-clr_counter_font_size);
    font-weight: var(--woof-sd-ie-clr_counter_font_weight);
    font-family: var(--woof-sd-ie-clr_counter_font_family);
    color: var(--woof-sd-ie-clr_counter_color);
    line-height: 0;

    background-color: var(--woof-sd-ie-clr_counter_bg_color);
    background-image: var(--woof-sd-ie-clr_counter_bg_image);
    background-size: cover;
    box-sizing: content-box;
    z-index: 99;
}

.woof-sd-ie.woof-sd-ie-color .woof-sd-ie-count:empty{
    display: none;
}

.woof-sd-ie.woof-sd-ie-color:hover > label{
    cursor: pointer;
}

.woof-sd-ie.woof-sd-ie-color > label > span{
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    height: 100%;
}

.woof-sd-ie.woof-sd-ie-color > label > span{
    border-radius: var(--woof-sd-ie-clr_border_radius);
}

.woof-sd-ie.woof-sd-ie-color .woof-sd-tooltiptext{
    display: var(--woof-sd-ie-clr_show_tooltip);
}

.woof-sd-ie.woof-sd-ie-color .woof-sd-tooltiptext b {
    display: var(--woof-sd-ie-clr_show_tooltip_count);
}