$zero: 0; //only for development

$font-size: 12pt !default;
$use-webfont: true !default;
$font-family-header: "Michroma" !default;
$font-family-body: "Play" !default;

$radiusOuter: 25px;
$radiusInner: 20px;

$colors: ("grey": #9e9993,
          "orange": #ff9c00,
          "red": #f00,
          "tan": #dfaf71, //old: #b1957a,
          "grey-brown": #aca98a,
          "yellow": #fc3,
          "sea-blue": #009cce,
          "blue": #3786ff,
          "green": #090
        );

$bgDefault: #0d0d0d;
$fgDefault: map-get($colors, "grey");

$areaPadding: 4px 6px;
$areaPadding_mobile: 2px 4px;
$areaBorderWidth: 4px;
$areaBorderWidth_mobile: 2px;

@function defineButtonSizes($factor: 1)
{
    @return (
             "":         55px * $factor,
             "xxs":      15px * $factor,
             "xs":       25px * $factor,
             "s":        40px * $factor,
             "l":        80px * $factor,
             "xl":       120px * $factor,
             "xxl":      180px * $factor)
}

@function definePanelSizes($factor: 1)
{
    @return (
             "":         75px * $factor,
             "xxs":      15px * $factor,
             "xs":       25px * $factor,
             "s":        45px * $factor,
             "l":        140px * $factor,
             "xl":       210px * $factor,
             "xxl":      300px * $factor)
}

$panelSizes: definePanelSizes();
$panelSizes_mobile: definePanelSizes(0.8);

$buttonSizes: defineButtonSizes();
$buttonSizes_mobile: defineButtonSizes(0.8);


@mixin mobile
{
    @media only screen and (max-width: 959px)  { @content; }
}


@mixin createAreasAndButtons($suffix, $value) {
    .btn#{$suffix},
    .area#{$suffix} {
        @content;
        min-height: $value;
        font-size: $value / 2.6;
        &.round-r {
            border-top-right-radius: $value;
            border-bottom-right-radius: $value;
            padding-right: ($value / 2);
        }
        &.round-l {
            border-top-left-radius: $value;
            border-bottom-left-radius: $value;
            padding-left: ($value / 2);
        }
    }
}