/**
 * @class Global_CSS
 */

/**
 * Includes the default styles for toolbar buttons, mostly used as a helper function.
 *
 * @param {color} $bg-color Base color to be used for the button.
 * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed.
 */
@mixin toolbar-button($bg-color, $type: $button-gradient) {
    &,
    .x-toolbar & {
        border: 1px solid darken($bg-color, 20%);
        border-top-color: darken($bg-color, 15%);
        background-color: $bg-color;
        @include color-by-background($bg-color);

        &.x-button-back:before,
        &.x-button-forward:before {
            background: darken($bg-color, 20%);
        }

        &,
        &.x-button-back:after,
        &.x-button-forward:after {
            @include background-gradient($bg-color, $type);
        }

        &.x-button-pressing, &.x-button-pressed, &.x-button-active {
            &, &:after {
                @include background-gradient(darken($bg-color, 3%), 'recessed');
            }
        }
    }
}

/**
 * Adds a small text shadow (or highlight) to give the impression of beveled text.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-text($type: 'shadow') {
    @if $include-highlights {
        @if $type == shadow {
            text-shadow: rgba(0,0,0,.5) 0 -.08em 0;
        } @else {
            text-shadow: rgba(255,255,255,.25) 0 .08em 0;
        }
    }
}

/**
 * Adds a small box shadow (or highlight) to give the impression of being beveled.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-box($type: 'light') {
    @if $include-highlights {
        @if $type == shadow {
            @include st-box-shadow(rgba(#000, .5) 0 -.06em 0);
        } @else {
            @include st-box-shadow(rgba(#fff, .35) 0 .06em 0);
        }
    }
}

/**
 * Bevels the text based on its background.
 *
 * @param {color} $bg-color Background color of element.
 *
 * See {@link #bevel-text}.
 */
@mixin bevel-by-background($bg-color) {
    @if (lightness($bg-color) > 50) {
        @include bevel-text(light);
    } @else {
        @include bevel-text;
    }
}

/**
 * Creates a background gradient for masked elements, based on the lightness of their background.
 *
 * @param {color} $bg-color Background color of element.
 * @param {percent} $percent Contrast of the new gradient to its background.
 * @param {percent} $style Gradient style of the gradient.
 *
 * See background-gradient mixin.
 */
@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
    @if (lightness($bg-color) > 50) {
        @include background-gradient(darken($bg-color, $contrast), $style);
    } @else {
        @include background-gradient(lighten($bg-color, $contrast), $style);
    }
}