//This is the RIGHT PLACE to edit the stylesheet

//let's start by telling people not to edit the generated CSS:
$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
/* #{$cakeisalie} */

/* Copyright 2009, 2015 Red Hat, Inc.
 *
 * Portions adapted from Mx's data/style/default.css
 *   Copyright 2009 Intel Corporation
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms and conditions of the GNU Lesser General Public License,
 * version 2.1, as published by the Free Software Foundation.
 *
 * This program is distributed in the hope it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for
 * more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
 */

/* Global Values */

// padding, margin and spacing
$base_padding: 6px;
$base_margin: 4px;
$base_spacing: 6px;

// border radii
$base_border_radius: 3px;
$modal_radius: 5px;
$circular_radius: 1000px;

// fonts
$base_font_size: 11;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));

// Fixed icon sizes
$base_icon_size: 16px;
$medium_icon_size: $base_icon_size * 1.5; // 24px
$large_icon_size: $base_icon_size * 2; // 32px

// Scaled values
// Used in elements that follow text scaling factors
$scaled_padding: to_em(6px); // same as $base_padding

// Used for symbolic icons that scale
$scalable_icon_size: to_em(16px);
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
$large_scalable_icon_size: $scalable_icon_size * 2;

// animation definition
$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

// Stage
stage {
  @include fontsize($base_font_size);
  color: $fg_color;
}

/* Common Stylings */
%reset {
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

// icon tiles
%tile {
  border-radius: $base_border_radius * 2;
  padding: $base_padding;
  spacing: $base_padding;
  text-align: center;
  transition-duration: 100ms;
}

// Text
%status_text {
  font-size: 2em;
  font-weight: bold;
  color: $osd_fg_color;
}

// osd panels
%osd_panel {
  color: $osd_fg_color;
  background-color: $osd_bg_color;
  border-radius: $modal_radius;
  padding: $base_padding * 2;
  border: 1px solid rgba(black, 0.75);
}

// Overview panels
// for the dash and workspace switcher
%overview_panel {
  color: $osd_fg_color;
  background-color: transparentize($osd_fg_color, 0.9);
}

// icon tiles
%icon_tile {
  border-radius: $base_border_radius;
  padding: $base_padding;
  border: 2px solid transparent;
  transition-duration: 100ms;
  text-align: center;
}

// dialogs
%bubble_panel {
  color: $fg_color;
  background-color: $base_color;
  box-shadow: none;
  border-radius: $modal_radius;

  @if $variant == 'dark' {
    border: 1px solid rgba(black, 0.75);
  } @else {
    border: none;
  }
}

// common button styling
%button_common {
  border-radius: $base_border_radius;
  padding: $base_padding * .5 $base_padding * 4;
  font-weight: bold;
  transition: border-width 300ms $ease_out_quad,
              box-shadow 300ms $ease_out_quad;
}

// button styling
%button {
  @extend %button_common;
  @include button(normal);
  &:focus { @include button(focus);}
  &:hover { @include button(hover);}
  &:insensitive { @include button(insensitive);}
  &:selected,
  &:active { @include button(active);}
  &:checked { @include button(checked);}
}

%icon_button {
  @extend %button_common;
  @include button(normal, $c: rgba($fg_color, 0.03));

  &:focus { @include button(focus);}
  &:hover { @include button(hover);}
  &:insensitive { @include button(insensitive);}
  &:selected,
  &:active { @include button(active);}
  &:checked { @include button(checked);}
}

%flat_button {
  @include button(flat);
  &:focus { @include button(flat-focus);}
  &:hover { @include button(flat-hover);}
  &:insensitive { @include button(flat-insensitive);}
  &:selected,
  &:active { @include button(flat-active);}
  &:checked { @include button(flat-checked);}
}

%default_button {
  @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $shadow: none);
  &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $shadow: none); }
  &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $shadow: none); }
  &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $shadow: none); }
  &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $shadow: none); }
}

// buttons in dialogs
%bubble_button {
  @include button(normal, $shadow: none);
  padding: $base_padding * 2 !important;
  border: none !important;
  border-top: 1px solid $borders_color !important;
  border-left: 1px solid $borders_color !important;

  &:insensitive { @include button(insensitive, $shadow: none); }
  &:hover { @include button(hover, $shadow: none); }
  &:focus { @include button(focus, $shadow: none); }
  &:active { @include button(active, $shadow: none); }
  &:checked { @include button(checked, $shadow: none);}

  &:first-child:ltr {
    border-left: none !important;
    border-radius: 0 0 0 $modal_radius;
  }

  &:last-child:ltr {
    border-radius: 0 0 $modal_radius 0;
    margin-right: 0 !important;
    color: $selected_bg_color !important;

    &:insensitive {
      color: rgba($selected_bg_color, 0.35) !important;
    }
  }

  &:first-child:rtl {
    border-radius: 0 0 $modal_radius 0;
    color: $selected_bg_color !important;

    &:insensitive {
      color: rgba($selected_bg_color, 0.35) !important;
    }
  }

  &:last-child:rtl {
    border-radius: 0 0 0 $modal_radius;
    margin-left: 0 !important;
  }

  &:first-child:last-child {
    border-radius: 0 0 $modal_radius $modal_radius;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: none !important;
  }
}

%float_bubble_button {
  @extend %button_common;
  @include button(normal);
  padding: $base_padding * 1.5 !important;
  border: 1px solid $borders_color;

  &:focus { @include button(focus); box-shadow: inset 0 0 0 2px $borders_color !important; }
  &:hover { @include button(hover);}
  &:insensitive { @include button(insensitive);}
  &:selected,
  &:active { @include button(active);}
  &:checked { @include button(checked);}
}

// items in popover menus
%menuitem {
  font-weight: normal;
  spacing: $base_padding;
  transition-duration: 100ms;
  padding: $base_padding * 1.5 $base_padding * 2;
}

%theme_dialogs {
  background-color: $base_color !important;
  border-radius: $base_border_radius;
  box-shadow: 0 2px 6px rgba(black, 0.15);
  border: solid $borders_color;
  border-width: if($variant == 'light', 0, 1px);
}

// tooltip
%tooltip {
  background-color: transparentize(black, 0.1);
  border: 1px solid transparentize(white, 0.9);
  color: white;
  border-radius: $circular_radius;
  padding: $base_padding $base_padding * 2;
  text-align: center;
}

// notification styling
@mixin notification_bubble($flat: false) {
  border: none;
  border-radius: $base_border_radius !important;
  margin: $base_margin 0 !important;
  box-shadow: none !important;

  @if $flat {
    @include button(undecorated);
  } @else {
    @include button(flat);
  }

  &:focus {
    @include button(flat-focus);
  }

  &:hover {
    @include button(flat-hover);
  }

  &:active {
    @include button(flat-active);
  }
}

/* General Typography */

%large_title {
  font-weight: 300;
  @include fontsize(24);
}

%title_1 {
  font-weight: 800;
  @include fontsize(20);
}

%title_2 {
  font-weight: 800;
  @include fontsize(15);
}

%title_3 {
  font-weight: 700;
  @include fontsize(15);
}

%title_4 {
  font-weight: 700;
  @include fontsize(13);
}

%heading {
  font-weight: 700;
  @include fontsize(11);
}

%caption_heading {
  font-weight: 700;
  @include fontsize(9);
}

%caption {
  font-weight: 400;
  @include fontsize(9);
}

%smaller {
  font-weight: 400;
  @include fontsize(8);
}

%monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";}
