@charset "UTF-8";

/*****************
 * Progress bars *
 *****************/
progressbar {
 // sizing
 &.horizontal {
   trough,
   progress { min-height: 6px; }
 }

 &.vertical {
   trough,
   progress { min-width: 6px; }
 }

 // FIXME: insensitive state missing and some other state should be set probably
 font-size: smaller;
 color: gtkalpha(gtk("@theme_button_foreground_normal"), 0.3);

 trough {
   border: 0px solid transparent;
   border-radius: $r;
   background-color: gtkalpha(gtk("@theme_button_foreground_normal"),0.3);
  }

 &:backdrop trough { background-color: gtkalpha("@theme_button_foreground_backdrop",0.3); } // looks like states are not passed to the trough component here

 progress {
   background-color: gtk("@theme_selected_bg_color");
   border: 0px solid transparent;
   border-radius: 3px;
   box-shadow: none; //needed for clipping
 }

 &:backdrop progress { 
   background-color: gtk("@theme_unfocused_selected_bg_color_alt");
  } // states not passed here as well

 &.osd { // progressbar.osd used for epiphany page loading progress
   background-color: transparent;
 }
}

treeview.view {
  &.progressbar {
    border: 0px solid transparent;
    border-radius: $r;
    background-color: gtk("@theme_selected_bg_color");
    color: gtk("@theme_selected_fg_color");
    background-image: none;
    &:selected {
      &:focus, & {
        background-color: gtkalpha(gtk("@theme_selected_bg_color"),0.25);
      }
    }
  }
  &.trough {
    background-color: $trough_color;
    &:selected {
      &:focus, & {
        background-color: gtkalpha("@theme_selected_fg_color",0.3);
      }
    }
  }
}

/*************
 * Level Bar *
 *************/
levelbar {
 block {
   min-width: 32px;
   min-height: 6px;
 }

 &.vertical block {
   min-width: 6px;
   min-height: 32px;
 }

 trough {
   border: 1px solid;
   padding: 2px;
   border-radius: 3px;
   @include entry(normal);

   &:backdrop { @include entry(backdrop); }
 }

 &.horizontal.discrete block { margin: 0 1px; }

 &.vertical.discrete block { margin: 1px 0; }

 block:not(.empty) {
   border: 1px solid gtk("@theme_selected_bg_color");
   background-color: gtk("@theme_selected_bg_color");
   box-shadow: none;
   border-radius: 1px;

   &:backdrop {
     border-color:     gtk("@theme_unfocused_selected_bg_color_alt");
     background-color: gtk("@theme_unfocused_selected_bg_color_alt");
   }
 }

 block {
   &.low {
     border-color:     gtk("@warning_color");
     background-color: gtk("@warning_color");
     &:backdrop {
       background-color: gtk("@warning_color_backdrop");
       border-color:     gtk("@warning_color_backdrop");
     }
   }

   &.high {
     border-color:     gtk("@success_color");
     background-color: gtk("@success_color");
     &:backdrop {
       background-color: gtk("@success_color_backdrop");
       border-color:     gtk("@success_color_backdrop");
     }
   }

   &.full {
    border-color:     gtk("@success_color");
    background-color: gtk("@success_color");
    &:backdrop {
      background-color: gtk("@success_color_backdrop");
      border-color:     gtk("@success_color_backdrop");
    }
   }

   &.empty {
     background-color: gtkalpha(gtk("@theme_button_foreground_normal"),0.3);
     border-color: transparent;
     box-shadow: none;
     &:backdrop { 
       background-color: gtkalpha("@theme_button_foreground_insensitive",0.3); 
      }
   }
 }
}
