//This is the RIGHT PLACE to edit the stylesheet

//
// Globals
//
$font-size: 10;
$font-family: Cantarell, Sans-Serif;
$_bubble_bg_color: opacify($osd_bg_color,0.25);
$_bubble_fg_color: $osd_fg_color;
$_bubble_borders_color: transparentize($osd_fg_color,0.8);
$_shell_fg_color: white;

// stage {
//   // font-family: $font-family;
//   @include fontsize($font-size);
//   color: $fg_color;
// }

%reset_style {
  background-color: transparent !important;
  background-gradient-direction: none !important;
  border: none !important;
  border-radius: 0 !important;
}

%bubble-entry {
  color: $fg_color;
  background-color: darken($bg_color, 2%);
  border-color: $borders_color;
  box-shadow: none;
  &:focus { border: 1px solid $selected_bg_color; }
}

$bubble_button_radius: $material_radius - 1px;

%bubble_button {
  padding: $cont_padding * 2;
  font-weight: bold !important;

  &:ltr { margin-right: 0; }
  &:rtl { margin-left: 0; }

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

  &:first-child:ltr {
    border-radius: 0 0 0 $bubble_button_radius;
  }

  &:last-child:ltr {
    border-radius: 0 0 $bubble_button_radius 0;
    margin-right: 0 !important;
  }

  &:first-child:rtl {
    border-radius: 0 0 $bubble_button_radius 0;
  }

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

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

%bubble-dialog {
  color: $fg_color;
  background-color: $base_color;
  border: if($variant == 'light', 0, 1px) solid $borders_color !important;
  box-shadow: 0 3px 8px -3px rgba(black, 0.35) !important;
}

// osd panels
%osd_panel {
  color: $osd_fg_color;
  background-color: $osd_bg_color;
  border-radius: $material_radius;
  padding: 12px;
  border: 1px solid $osd_borders_color !important;
  box-shadow: 0 3px 8px -2px rgba(black, 0.35) !important;
}

%icon_tile {
  color: $_shell_fg_color;
  border-radius: $bt_radius;
  padding: 6px;
  border: 1px solid transparent;
  transition-duration: 0ms;
  text-align: center;
}

%overview-icon {
  .overview-icon {
    @extend %icon_tile;
  }

  &:focus .overview-icon,
  &:hover .overview-icon {
    background-color: rgba($selected_bg_color, 0.5);
    border: 1px solid $selected_bg_color;
  }

  &:active .overview-icon,
  &:active:focus .overview-icon,
  &:active:hover .overview-icon {
    background-color: rgba($selected_bg_color, 0.75);
    border: 1px solid $selected_bg_color;
  }
}

%status_text {
  font-size: 2em;
  font-weight: bold;
  color: $fg_color;
}

/* 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";}
