/* The bare minimum styling applied to all demo Fontsamplers */

// A fairly simple approach to spacing out all the UI elements
> .fsjs-wrapper {
    display: flex;
    justify-content: space-between;
}

.fsjs-block-tester {
    display: block;
}

// All UI elements
.fsjs-block,
[data-axis-block] {
    box-sizing: border-box;
    padding: $elementPadding;
    position: relative;
    margin: $elementMargin;
    width: 100%;
}

[data-axis-block] {
    margin-top: 0;
    margin-bottom: 0;
}

.fsjs-label {
    line-height: $labelHeight;
}

.fsjs-block-type-slider,
.fsjs-block-type-slidergroup {
    .fsjs-label {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        // Only for labels with Text, value & unit
        span:first-child {
            margin-right: auto;
        }

        .fsjs-label-value {
            cursor: text;
        }

        .fsjs-label-unit {
            &:before {
                content: " "; // figure space #2007
            }
        }
    }
}

.fsjs-block-opentype .fsjs-label {
    display: block;
    justify-content: flex-start;
}

[contenteditable] {
    outline: none;
}