/* -----------------------------------------------------------------------------
   ComboViewer / Viewer / FlipBook
----------------------------------------------------------------------------- */

#ComboViewerPanel {
  & Toolbar {
    border-bottom: 1 solid @accent; // accent line against viewport
    &::separator:horizontal {
      // workaround for first tool button
      // which helps with alignment
      margin: 0 0 0 2;
    }
    & QToolButton {
      margin: 2 0 3 2;
    }
  }
}

#ComboViewerToolOptions {
  border-bottom: 1 solid @accent; // accent line against viewport & ToolBar
}

#ComboViewer,
#ViewerPanel,
FlipBook {
  & #ToolBarContainer {
    background-color: transparent;
    border-top: 2 solid @accent;
    border-bottom: 1 solid @accent;
    padding-right: -1; // hides right border on #ScrollRightButton when
                       // fps slider is disabled
  }
}

#flipCustomize {
  // options menu
  &:extend(.button-tool all);
  margin-left: 3;
  &::menu-button {
    background-color: transparent;
    width: 35;
  }
  &::menu-arrow {
    image: none;
  }
}

QToolBar#FlipConsolePlayToolBar {
  &::separator:horizontal {
    margin: 0 3;
  }
  & QToolButton {
    margin-top: 2;
    margin-bottom: 2;
    height: 16;
    padding-left: 1;
    padding-right: 1;
  }
}

#ViewerFpsSlider {
  background-color: transparent;
  background-image: url('@{img-url}/@{slider-groove-img}');
  background-position: center center;
  background-repeat: repeat-x;
  border: 0;
  height: 19;
  margin: 0 3 0 37;
  max-width: 300;
  min-width: 0;
  &::sub-line:horizontal {
    subcontrol-origin: absolute;
    background-color: @button-bg-color;
    border: 1 solid @button-border-color;
    border-top-left-radius: 2;
    border-bottom-left-radius: 2;
    height: 16;
    left: -33;
    width: 14;
  }
  &::add-line:horizontal {
    subcontrol-position: left;
    background-color: @button-bg-color;
    border: 1 solid @button-border-color;
    border-top-right-radius: 2;
    border-bottom-right-radius: 2;
    left: 18;
    height: 16;
    image-position: center center;
    width: 13;
  }
  &::sub-line:horizontal,
  &::add-line:horizontal {
    &:hover {
      &:extend(.Button:hover all);
    }
    &:pressed {
      &:extend(.Button:pressed all);
    }
    &:disabled {
      &:extend(.Button:disabled all);
    }
  }
  &::handle {
    &::horizontal {
      @size: 9;
      background-color: @slider-handle-bg-color;
      border: 1 solid @slider-handle-border-color;
      border-radius: 2;
      margin: 2 0 3 0;
      min-width: @size;
      width: @size;
      max-width: @size;
    }
  }
}

FlipSlider {
  qproperty-PBHeight: 15;

  // slider
  qproperty-PBOverlay: url('@{img-url}/@{flipslider-img}');
  qproperty-PBColorMarginLeft: 1;
  qproperty-PBColorMarginTop: 2;
  qproperty-PBColorMarginRight: 1;
  qproperty-PBColorMarginBottom: 2;
  
  // marker
  qproperty-PBMarker: url('@{img-url}/@{flipmarker-img}');
  qproperty-PBMarkerMarginLeft: 3;
  qproperty-PBMarkerMarginRight: 3;
  qproperty-notStartedColor: @flipslider-notstarted-color;
  qproperty-startedColor: @flipslider-started-color;
  qproperty-baseColor: @flipslider-base-color;
  qproperty-finishedColor: @flipslider-finished-color;
}

Ruler {
  qproperty-ParentBGColor: @viewer-ruler-bg-color;
  qproperty-ScaleColor: @viewer-ruler-scale-color;
}

#RulerToolOptionValues {
  color: @viewer-ruler-ToolOptionValues-color;
}