    @import 'compass/css3';

    /**
     * @class Global_CSS
     */

    /**
     * Add a background gradient to a selector.
     *
     *     .my-element {
     *       @include background-gradient(green, 'recessed')
     *     }
     *
     * @param {color} $bg-color The base color of the gradient.
     * @param {string} $type The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat.
     */
    @mixin background-gradient($bg-color, $type: $base-gradient) {
      background-color: $bg-color;
      @if $include-highlights {
        @if $type == bevel {
          @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%))));
        } @else if $type == glossy {
          @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
        } @else if $type == recessed {
          @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
        } @else if $type == matte {
          @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));
        } @else {
          background-image: none;
        }
      }
    }

    /**
     * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
     *
     *     @include pictos-iconmask('attachment');
     *
     * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
     */
    @mixin pictos-iconmask($name) {
      .x-tab .x-button-icon.#{$name},
      .x-button .x-button-icon.x-icon-mask.#{$name} {
        -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
      }
    }

    /**
     * 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: .1em solid darken($bg-color, 20%);
        border-top-color: darken($bg-color, 15%);
        @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-icon.x-icon-mask {
          @include mask-by-background($bg-color);
        }

        @if $include-highlights {
          @include bevel-by-background($bg-color);
          -webkit-box-shadow: rgba(#fff, .1) 0 .1em 0;
        }

        &.x-button-pressed, &.x-button-active {
          &, &:after {
            @include background-gradient(darken($bg-color, 7%), 'recessed');
          }
          @if $include-highlights {
            -webkit-box-shadow: inset saturate(darken($bg-color, 15%), 5%) 0 0 .1em, rgba(#fff, .1) 0 .1em 0;
          }
        }
      }
    }

    /**
     * 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 {
          -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0;
        } @else {
          -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0;
        }
      }
    }

    /**
     * Adds basic styles to :before or :after pseudo-elements.
     *
     *     .my-element:after {
     *       @include insertion(50px, 50px);
     *     }
     *
     * @param {measurement} $width Height of pseudo-element.
     * @param {measurement} $height Height of pseudo-element.
     * @param {measurement} $top Top positioning of pseudo-element.
     * @param {measurement} $left Left positioning of pseudo-element.
     *
     */
    @mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
      content: "";
      position: absolute;
      width: $width;
      height: $height;
      top: $top;
      left: $left;
    }

    /**
     * Makes an element stretch to its parent's bounds.
     */
    @mixin stretch {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    /**
     * Colors the text of an element based on lightness of its background.
     *
     *     .my-element {
     *       @include color-by-background(#fff); // Colors text black.
     *     }
     *
     *     .my-element {
     *       @include color-by-background(#fff, 40%); // Colors text gray.
     *     }
     *
     * @param {color} $bg-color Background color of element.
     * @param {percent} $contrast Contrast of text color to its background.
     *
     */
    @mixin color-by-background($bg-color, $contrast: 100%) {
      @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) }
      @else { color: lighten($bg-color, $contrast) }
    }

    /**
     * Bevels the text based on its background.
     *
     * @param {color} $bg-color Background color of element.
     * @see 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 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) }
    }

    /**
     * Makes the element text overflow to use ellipsis.
     */
    @mixin ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }