@mixin desktop {
    html {
        @content;
    }
}
@mixin mobile {
    #no-not-show-this-hack html {
        @content;
    }
}

@mixin button-background($color, $dark: $black, $light: white) {
    // Set a background gradient based on $color and $dark or $light as text
    // color (depending on contrast).

    background-color: $color;
    @include background-image(linear-gradient(170deg, lighten($color, 14%), $color));
    color: contrast-color($color, $dark, $light);

    &:hover, &:focus {
        background-color: darken($color, 7%);
        @include background-image(linear-gradient(170deg, lighten($color, 7%), darken($color, 7%)));
    }
}

@mixin button-round-background() {
    background-color: #dedede;
    @include background-image(linear-gradient(top, #eaeaea, #dedede));
    color: contrast-color(#dedede, $black, white);

    &:hover, &:focus {
        background-color: #d1d1d1;
        @include background-image(linear-gradient(top, #ececec, #d1d1d1));
        color: contrast-color(#d1d1d1, $black, white);
    }
}

@mixin button-base {
    text-decoration: none;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    border: none;

    max-width: 100%;
    @include box-sizing(border-box);

    &:hover, &:focus {
        text-decoration: none;
    }
}

@mixin button($color) {
    @include button-base;
    line-height: 2.5;
    min-width: 6em;
    font-weight: bold;
    padding: 0 1em;

    @include button-background($color);
}

@mixin button-small($color1, $color2, $dark: $black, $light: white) {
    font-size: $small;
    line-height: 1.3;
    @include button-base;
    @include border-radius(0.65em);
    padding: 0 1em;

    background-color: lighten($color1, 14%);
    @include background-image(linear-gradient(top, lighten($color1, 23%), lighten($color1, 14%)));
    color: contrast-color($color1, $dark, $light);

    &:hover, &:focus {
        background-color: $color2;
        @include background-image(linear-gradient(top, lighten($color2, 7%), $color2));
        color: contrast-color($color2, $dark, $light);
    }
    &:active, &.active {
        background-color: $color2;
        @include background-image(linear-gradient(bottom, lighten($color2, 7%), $color2));
        @include box-shadow(1px 1px 1px #333 inset);
        color: contrast-color($color2, $dark, $light);
    }
    .inactive & {
        background: $bg2 !important;
        color: $border !important;
        cursor: default;
        @include box-shadow(none);
    }
}

@mixin button-round {
    @include button-base;
    font-size: $large;
    line-height: 1.7;
    @include border-radius(0.85em);
    padding: 0 0.85em;
    font-weight: bold;
    border: 1px solid $border;

    @include button-round-background();

    &:hover, &:focus {
        text-decoration: none;
    }
}
