@import "variables";
.group {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    .btn,
    .area {
        min-height: 100%;
    }
    .label {
        background-color: $bgDefault;
        color: $fgDefault;
        font-weight: 500;
        text-transform: uppercase;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: auto;
        user-select: none;
        font-family: inherit;
        padding: $areaPadding;
        overflow: hidden;
        vertical-align: top;
        box-sizing: border-box;
        text-align: left;
        margin: 0 -2px;
    }
}

@mixin createGroups($sizesDefinition) {
    @each $name,
    $value in $sizesDefinition {
        $suffix: "-" + $name;
        @if ($name=="") {
            $suffix: "";
        }
        .group#{$suffix} {
            height: $value;
            @include createAreasAndButtons("", $value) {
                margin-top: 0;
                margin-bottom: 0;
            }
            .label {
                font-size: $value;
                line-height: ($value - 8px);
            }
        }
    }
}

@include createGroups($buttonSizes);
@include mobile {
    @include createGroups($buttonSizes_mobile);
}