@import "variables";
%areaButtonCommon {
    border: $areaBorderWidth solid $bgDefault;
    user-select: none;
    font-family: inherit;
    font-weight: normal;
    padding: $areaPadding;
    overflow: hidden;
    white-space: normal;
    vertical-align: top;
    box-sizing: border-box;
    text-align: left;
    background-color: $fgDefault;
    color: $bgDefault;
    margin: 8px;
    @include mobile {
        margin: 6px;
    }
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    &.flex {
        flex: 1;
    }
    @include mobile {
        border: $areaBorderWidth_mobile solid $bgDefault;
        padding: $areaPadding_mobile;
        font-size: 0.9em;
    }
}

.area {
    @extend %areaButtonCommon;
    cursor: default;
}

.btn {
    @extend %areaButtonCommon;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    min-width: 220px;
    @include mobile {
        min-width: 180px;
    }
    &:focus {
        outline: none;
    }
    &::-moz-focus-inner {
        border-color: transparent;
    }
    &.disabled,
    &[disabled] {
        background-color: map-get($colors, grey) !important;
        color: fade-out($bgDefault, 0.4) !important;
    }
    &:active {
        background-color: lighten($fgDefault, 10%);
    }
}

@mixin createAreasAndButtonsWithSuffix($sizesDefinition) {
    @each $name,
    $value in $sizesDefinition {
        $suffix: "-" + $name;
        @if ($name=="") {
            $suffix: "";
        }
        @include createAreasAndButtons($suffix, $value);
    }
}

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