@css_color_text: #333;
@css_color_background: #fff;
@css_color_label: #333;
@css_color_notdef: #dedede;
@css_value_size_label: inherit;
@css_value_fontfamily_label: inherit;
@css_value_lineheight_label: normal;
@css_color_highlight: #efefef;
@css_color_highlight_hover: #dedede;
@css_color_line: #333333;
@css_color_handle: #333333;
@css_color_button_background: #efefef;
@css_color_button_background_inactive: #dfdfdf;
@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-wrapper .fontsampler-interface .type-tester__content.invert {
    color: @css_color_background;
}

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

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

/* 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,
.fontsampler-interface .fontsampler-opentype-features {
    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,
.fontsampler-interface .selectric-items li.selected {
    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 .rangeslider {
    background: @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;
}

/* button backgrounds */
.fontsampler-interface .selectric > .label,
.fontsampler-interface .selectric > .button {
    background: @css_color_button_background;
}
.fontsampler-interface .fontsampler-ui-block .fontsampler-multiselect > button {
    background: @css_color_button_background_inactive;
}
.fontsampler-interface .fontsampler-ui-block .fontsampler-multiselect > button.fontsampler-multiselect-selected {
    background: @css_color_button_background;
}

/* label line-height */
.fontsampler-interface label.fontsampler-slider .slider-label,
.fontsampler-interface label.fontsampler-slider .slider-value,
.fontsampler-interface .fontsampler-font-label label {
    line-height: @css_value_lineheight_label;
}

.fontsampler-interface .selectric > .label {
    line-height: @css_value_lineheight_label !important;
}

/* button icon colors */
.fontsampler-interface .icon-align-left,
.fontsampler-interface .icon-align-center,
.fontsampler-interface .icon-align-right,
.fontsampler-interface .icon-opentype,
.fontsampler-interface .icon-invert-black,
.fontsampler-interface .icon-invert-white,
.fontsampler-interface .selectric > .button {
    color: @css_color_label;
}

.fontsampler-interface .fontsampler-glyph-highlight {
    color: @css_color_notdef;
}