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

stage {
  @include font(body-1);
  color: $fg_color;
}

%status_text {
  @include font(display-2);
  color: $inverse_hint_fg_color;
}

$bubble_button_radius: if($corner_style == 'circular', $circular_radius, $material_radius);

%bubble_button {
  border: none;
  margin-bottom: $container-padding;
  @include button(normal);
  @include font(button);

  &:hover { @include button(hover); }
  &:active { @include button(active); color: $fg_color !important; }
  &:insensitive { @include button(insensitive); }
  &:focus { @include button(focus); }

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

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

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

%osd_button {
  border: none;
  background-color: transparent;
  box-shadow: none;

  &:insensitive { @include button(insensitive, $c:$system_bg_color, $tc: $inverse_disabled_secondary_fg_color); }
  &:focus { @include button(focus, $c:$system_bg_color, $tc: $inverse_fg_color); }
  &:hover { @include button(hover, $c:$system_bg_color, $tc: $inverse_fg_color); }
  &:active { @include button(active, $c:$system_bg_color, $tc: $inverse_fg_color); }
  &:outlined, &:checked { @include button(checked); }
}

%osd_panel {
  color: $inverse_fg_color;
  background-color: $system_bg_color;
  border: none;
  box-shadow: $shadow_2;
  border-radius: $buttons_radius;
  padding: $container_padding * 2;
}
