$default-gradient: null;
 
/**
 * @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.
 */
@mixin toolbar-button($bg-color) {
  &,
  .x-toolbar & {
    border: 2px solid $foreground-color;
    background-color: $bg-color;
 
    &,
    &.x-button-back:after,
    &.x-button-forward:after {
      background-color: $bg-color;
    }
 
    &.x-button-pressing,
    &.x-button-pressed {
      &,
      &:after {
        color: $bg-color;
        background-color: $foreground-color;
      }
    }
  }
}
 
/**
 * 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.
 *
 */
@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) }
}
 
 
@mixin readable-color($color, $contrast: 100) {
  @if lightness(lighten($color, 100 - $contrast)) > 30 {
      color: $color;
      fill: $color;
  } @else {
      color: darken(lighten($color, 100 - $contrast), 30);
      fill: darken(lighten($color, 100 - $contrast), 30);
  }
}
 
/**
* TextBlock styles
*/
@mixin phone-text-normal(){
  font-family: $phone-font-family-normal;
  font-size: $font-size-normal;
  color: $foreground-color;
}
 
@mixin phone-text-title1(){
  font-family: $phone-font-family-semilight;
  font-size: $font-size-extra-large;
  color: $foreground-color;
}
 
@mixin phone-text-subtle(){
  font-family: $phone-font-family-normal;
  font-size: $font-size-normal;
  color: $phone-subtle-color;
}
 
@mixin phone-text-title2(){
  font-family: $phone-font-family-semilight;
  font-size: $phone-font-size-large;
  color: $foreground-color;
}
 
@mixin phone-text-title3(){
  font-family: $phone-font-family-semilight;
  font-size: $font-size-medium;
  color: $foreground-color;
}
 
@mixin phone-text-accent(){
  font-family: $phone-font-family-semibold;
  font-size: $font-size-normal;
  color: $base-color;
}
 
@mixin fieldset-instructions() {
  color: #666666;
  font-size: .8em;
  text-align: left;
  margin: 0.7em 0 0.3em 0;
}