$baseColor: #333 !default;
$accentColor: #0AF !default;
$disabledColor: #DDD !default;
$bgColor: #FDFDFD !default;
$bgColorHover: darken($bgColor, 5%) !default;

$borderRadius: 2px !default;
$borderWidth: 1px !default;
$borderColor: lighten($baseColor, 50%) !default;

$sliderBarWidth: 1px !default;
$sliderBarRadius: 2px !default;
$sliderHandleSize: 10px !default;
$sliderHandleColor: $baseColor !default;

$buttonPadding: 0.1em 0.5em 0 !default;
$buttonHeight: 2em !default;

$labelHeight: 1.5em !default;

$elementPadding: 0 5px !default;
$elementMargin: 5px !default;

// Scope all styles for fontsamplers with skin only
.fsjs-skin {
    // Handle basic loading states to avoid flash of unstyle text
    transition: opacity 0.2s ease-out;
    opacity: 0;

    // Show fontsampler when initialized
    &.fsjs-initialized {
        opacity: 1;
        display: block;
    }

    .fsjs-block-tester {
        transition: opacity 0.2s ease-out;
        opacity: 1;
    }
 
    &.fsjs-loading .fsjs-block-tester,
    &.fsjs-timeout .fsjs-block-tester {
        opacity: 0;
    }

    // A sensible baseline layout
    @import "_fontsampler.layout";

    // UI element types
    @import "_fontsampler.buttongroup";
    @import "_fontsampler.checkboxes";

    // Overwrite included libraries’ and polyfill’s styling
    @import "_dropkick";
    // @import "_rangeslider";
    @import "_fontsampler.sliders";

    .fsjs-disabled {
        .fsjs-label {
            color: $disabledColor;
        }

        .rangeSlider {
            pointer-events: none;
            background-color: $disabledColor;

            .rangeSlider__handle,
            .rangeSlider__fill {
                background-color: $disabledColor;
            }
        }

        .dk-select .dk-selected {
            color: $disabledColor;
        }
    }

    // Hide or style variable font sliders and fontfamily dropdown options
    // when the browser does not support them
    [data-fsjs-block=variation] {
        display: none;
    }

    @supports (font-variation-settings: normal) {
        [data-fsjs-block=variation] {
            display: block;
        }
    }
}