@css_color_text: #333;
@css_color_background: #fff;
@css_color_label: #333;
@css_value_size_label: inherit;
@css_value_fontfamily_label: inherit;
@css_color_highlight: #efefef;
@css_color_highlight_hover: #dedede;
@css_color_line: #333333;
@css_color_handle: #333333;
@css_value_column_gutter: 10px;
@css_value_row_height: 30px;
@css_value_row_gutter: 10px;

/* css_color_text */
.fontsampler-interface .type-tester__content {
    color: @css_color_text;
}

.fontsampler-interface .type-tester__content.invert {
    background: @css_color_text;
}

/* css_color_background */
.fontsampler-interface .type-tester__content {
    background: @css_color_background;
}

.fontsampler-interface .type-tester__content.invert {
    color: @css_color_background;
}

/* css_color_label */
/* css_size_label */
/* css_fontfamily_label */
.fontsampler-interface .fontsampler-slider .slider-label,
.fontsampler-interface .fontsampler-slider .slider-value,
.fontsampler-interface .selectric .label,
.fontsampler-interface .selectric-items li,
.fontsampler-interface .fontsampler-ui-block-fontpicker .fontsampler-font-label label {
    color: @css_color_label;
    font-size: @css_value_size_label;
    font-family: @css_value_fontfamily_label;
}

/* css_color_highlight */
.fontsampler-interface .selectric-items {
    background: @css_color_highlight;
}

/* css_color_highlight_hover */
.fontsampler-interface .selectric-items li:hover {
    background: @css_color_highlight_hover;
}

/* css_color_line */
.fontsampler-interface .selectric-open .selectric,
.fontsampler-interface .selectric .label,
.fontsampler-interface .selectric .button,
.fontsampler-wrapper .fontsampler-interface .fontsampler-multiselect > button,
.fontsampler-interface .rangeslider__fill,
.fontsampler-interface .fontsampler-ui-block-fontpicker .fontsampler-font-label label,
.fontsampler-interface .fontsampler-ui-block-buy a,
.fontsampler-interface .fontsampler-ui-block-specimen a {
    border-bottom: 1px solid @css_color_line;
}

.fontsampler-interface .fontsampler-opentype-features {
    border: 1px solid @css_color_line;
}

/* css_color_handle */
.fontsampler-interface .rangeslider__handle {
    background: @css_color_handle;
}

/* css_color_icon_active */
/* css_color_icon_inactive */

.fontsampler-interface .fontsampler-ui-block {
    height: @css_value_row_height;
    margin-bottom: @css_value_row_gutter;
    padding-right: @css_value_column_gutter;
}

.fontsampler-interface .fontsampler-interface-link-text {
    height: @css_value_row_height;
}