@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(gtk("@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(gtk("@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(
          gtk("@theme_button_foreground_insensitive"),
          0.3
        );
      }
    }
  }
}
