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

#ComboViewerPanel {
  & Toolbar {
    border-bottom: 1px solid @accent1; // Accent line against viewport
    &::separator:horizontal {
      // Workaround for first tool button (#W001)
      margin: 0 0 0 2px;
    }
    & QToolButton {
      // (#W001) Make sure the first tool button has enough space on the left
      margin: 2px 0 3px 2px;
    }
  }
}

#ComboViewerToolOptions {
  border-bottom: 1px solid @accent1; // Accent line against viewport/ToolBar
}

#ComboViewer,
#ViewerPanel,
FlipBook {

  // BUG 01:
  // 2px width is required for the border-top property to work.
  // There is a hard-coded GRAY line that is persistent no matter what.
  //
  // BUG 02:
  // When opening a new ComboViewer panel from the Windows menu...
  // The border-top property will not be shown until the app has been
  // restarted, or the theme reloaded.
  //
  // If these BUGS have been fixed then consider if the border-top
  // property below requires adjustment, to 1px for example.

  & #ToolBarContainer {
    background-color: transparent;
    border-top: 2px solid @accent1;
    border-bottom: 1px solid @accent1;
    // Hides right border on #ScrollRightButton when
    // FPS Slider is hidden
    padding-right: -1px;
    & QLineEdit {
      border-color: @fps-input-border-color;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      height: 16px;
    }
  }
}

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

#ViewerFpsSlider {
  background-color: transparent;
  background-image: url('@{img-url}/slider_groove.png');
  background-position: center center;
  background-repeat: repeat-x;
  border: 0;
  height: 19px;
  margin: 0 3px 0 31px;
  max-width: 450px;
  min-width: 0px;
  &::sub-line:horizontal {
    subcontrol-origin: absolute;
    background-color: @button-bg-color;
    border: 1px solid @button-border-color;
    height: 16px;
    left: -33px;
    padding-left: 1px;
    width: 14px;
    &:pressed {
      background-color: @button-bg-color-pressed;
      border-color: @accent1;
    }
  }
  &::add-line:horizontal {
    subcontrol-position: left;
    background-color: @button-bg-color;
    border: 1px solid @button-border-color;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    left: 13px;
    height: 16px;
    image-position: center center;
    width: 13px;
    &:pressed {
      background-color: @button-bg-color-pressed;
      border-color: @accent1;
    }
  }
  &::handle {
    &::horizontal {
      @size: 9px;
      background-color: @slider-handle-bg-color;
      border: 1px solid @slider-handle-border-color;
      border-radius: 2px;
      margin: 2px 0 3px 0;
      min-width: @size;
      width: @size;
      max-width: @size;
    }
  }
}

FlipSlider {
  qproperty-PBHeight: 15;

  qproperty-PBOverlay: url('@{img-url}/@{flipslider-img}');
  qproperty-PBMarker: url('@{img-url}/@{flipmarker-img}');
  qproperty-PBColorMarginLeft: 1;
  qproperty-PBColorMarginTop: 2;
  qproperty-PBColorMarginRight: 1;
  qproperty-PBColorMarginBottom: 2;

  qproperty-PBMarkerMarginLeft: 3;
  qproperty-PBMarkerMarginRight: 3;
  qproperty-notStartedColor: @flipslider-notstarted-color;
  qproperty-startedColor: @flipslider-started-color;
  qproperty-baseColor: @flipslider-base-color;
}

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

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