/* -----------------------------------------------------------------------------
   Main
----------------------------------------------------------------------------- */

QWidget {
  background-color: @bg;
  color: @text-color;
  &:disabled {
    color: @text-color-disabled;
  }
}

QFrame {
  border: 0;
  margin: 0;
  padding: 0;
  alternate-background-color: @text-color;
}

QToolTip,
#helpToolTip {
  background-color: @tooltip-bg-color;
  border: 1 solid @tooltip-border-color;
  color: @tooltip-text-color;
  padding: 1 1;
}

#DockSeparator,
QMainWindow::separator,
QSplitter::handle {
  background-color: @dock-bg-color;
  height: 4;
  width: 4;
}

#TDockPlaceholder {
  background-color: @dock-placeholder-color;
}

TPanel {
  background-color: @dock-bg-color;
}

/* -----------------------------------------------------------------------------
   Topbar
----------------------------------------------------------------------------- */

#TopBar {
  background: @topbar-bg-color;
  border: 0;
  border-bottom: 1 solid @topbar-border-color;
  & #EditToolLockButton {
    background: @topbar-bg-color;
    spacing: 0;
    &::indicator {
      // inherits from #ToolOptions window
      background: none;
      border: none;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

#TopBarTabContainer {
  background-color: @topbar-bg-color;
  margin-bottom: 1; // Required for #TopBar border-bottom to show
}

#StackedMenuBar {
  border: 0;
  margin: 0;
  padding: 0;
}

QMenuBar {
  background-color: @topbar-bg-color;
  border: 0;
  &::item {
    background-color: @topbar-bg-color;
    border-left: 1 solid @topbar-bg-color; // Helps to align with QMenu
    margin: 0;
    padding: 3 5 3 5;
    &:selected {
      .hl-color-secondary;
    }
    &:pressed {
      .hl-color;
    }
  }
}

/* -----------------------------------------------------------------------------
   Workspaces
----------------------------------------------------------------------------- */

#TopBarTab {
  margin: 0;
  padding: 0;
  background-color: transparent;
  &::tab {
    &:extend(.tab-flat all);
    border-top: 1 solid @tab-border-color;
    margin: 0 0 -1 0;
    padding: 2 8 3 8;
    &:selected {
      background-color: @hl-bg-color;
    }
    &:first {
      border-left: 1 solid @tab-border-color;
    }
  }
  & QToolButton {
    border-left: 2 solid @accent;
    border-top: 1 solid @accent;
    border-right: 1 solid @accent;
    border-bottom: 0;
    margin-left: -1;
    margin-top: 0;
  }
}

/* -----------------------------------------------------------------------------
   Menu
----------------------------------------------------------------------------- */

QMenu {
  background-color: @menu-bg-color;
  border: 1 solid @menu-border-color;
  color: @menu-text-color;
  padding: 2 0;
  &::item {
    border: 0;
    padding: 3 28 3 14;
    &:selected {
      background-color: @menu-item-bg-color-selected;
      color: @menu-item-text-color-selected;
    }
    &:checked {
      color: @menu-checkbox-text-color-selected;
      &:selected {
        background-color: @menu-item-bg-color-selected;
        color: @menu-item-text-color-selected;
      }
    }
    &:disabled {
      background: none;
      color: @text-color-disabled;
      &:selected {
        color: @text-color-disabled; /* fix for disabled indicator */
      }
    }
  }
  &::separator {
    border-top: 1 solid @menu-separator-color;
    height: 0;
    margin: 2 0;
  }
  &::icon {
    border-radius: 2;
    position: absolute;
    left: 7;
    padding: 0;
    margin: 0;
    qproperty-icon: url('@{img-url}/none');
    &:checked {
      background-color: @menu-icon-checked-bg-color;
      border: 1 solid @menu-icon-checked-border-color;
    }
  }
  &::indicator {
    &:non-exclusive {
      &:extend(.CheckBox::indicator all);
    }
    &:exclusive {
      &:extend(.RadioButton::indicator all);
    }
    margin-left: 8;
  }
}

/* -----------------------------------------------------------------------------
   Titlebars
----------------------------------------------------------------------------- */

TPanelTitleBar {
  background-color: @title-bg-color;
  border-bottom: @title-border-width solid @title-border-color;
  height: 18;
  min-height: 18;
  qproperty-TitleColor: @title-text-color;
  qproperty-ActiveTitleColor: @title-text-color-active;

  // Close button rollover color
  qproperty-OverColor: @title-close-over-color;
}

TPanelTitleBarButton {
  qproperty-PressedColor: @title-button-pressed-color;
  qproperty-FreezeColor: @title-button-freeze-color;
  qproperty-PreviewColor: @title-button-preview-color;
  qproperty-OverColor: @title-button-rollover-color;
}

/* -----------------------------------------------------------------------------
   Scrollbars
----------------------------------------------------------------------------- */

QAbstractScrollArea::corner {
  background-color: @scrollbar-bg-color;
}

QScrollBar {
  background-color: @scrollbar-bg-color;
  border: 0;
  &:horizontal {
    height: 15;
    margin: 0;
  }
  &:vertical {
    margin: 0;
    width: 15;
  }

  &::handle {
    border: @scrollbar-handle-border-size solid @scrollbar-handle-border-color;
    border-radius: @scrollbar-handle-radius;
    &:horizontal,
    &:vertical {
      &:hover {
        background-color: @scrollbar-handle-bg-color-hover;
        border-color: @scrollbar-handle-border-color-hover;
      }
      &:pressed {
        background-color: @scrollbar-handle-bg-color-pressed;
        border-color: @scrollbar-handle-border-color-pressed;
      }
    }
    &:horizontal {
      background-color: @scrollbar-handle-bg-color;
      margin: @scrollbar-handle-margin 16;
      min-width: 20;
    }
    &:vertical {
      background-color: @scrollbar-handle-bg-color;
      margin: 16 @scrollbar-handle-margin 16 @scrollbar-handle-margin;
      min-height: 20;
    }
  }

  &::add-line {
    subcontrol-origin: margin;
    border: 0;
    &:horizontal { // right
      subcontrol-position: right;
      background-color: @scrollbar-bg-color;
      margin: 0;
      width: 16;
    }
    &:vertical { // down
      subcontrol-position: bottom;
      background-color: @scrollbar-bg-color;
      margin: 0;
      height: 16;
    }
  }

  &::sub-line {
    border: 0;
    subcontrol-origin: margin;
    &:horizontal { // left
      subcontrol-position: left;
      background-color: @scrollbar-bg-color;
      margin: 0;
      width: 16;
    }
    &:vertical { // up
      subcontrol-position: top;
      background-color: @scrollbar-bg-color;
      margin: 0;
      height: 16;
    }
  }

  @arrow-pressed: 1 0 0 0; // press effect shortcut, nudge arrow down 1

  &::up-arrow:vertical {
    image: url('@{img-url}/scroll-up.svg');
    image-position: center center;
    &:pressed {
      margin: @arrow-pressed;
    }
  }

  &::down-arrow:vertical {
    image: url('@{img-url}/scroll-down.svg');
    image-position: center center;
    &:pressed {
      margin: @arrow-pressed;
    }
  }

  &::left-arrow:horizontal {
    image: url('@{img-url}/scroll-left.svg');
    image-position: center center;
    &:pressed {
      margin: @arrow-pressed;
    }
  }

  &::right-arrow:horizontal {
    image: url('@{img-url}/scroll-right.svg');
    image-position: center center;
    &:pressed {
      margin: @arrow-pressed;
    }
  }

  &::sub-page,
  &::add-page {
    &:horizontal,
    &:vertical {
      background: none;
    }
  }
}

/* -----------------------------------------------------------------------------
   QToolBar
----------------------------------------------------------------------------- */

/* This applies to QToolBar, this is not the #ToolBar window, although the
  properties here also apply in the window, you should look in
  [layouts/toolbar] if you want window control. */

QToolBar {
  padding: 0;
  &::separator {
    &:horizontal {
      border-left: 1 solid @accent;
      margin: 0 1;
      width: 0;
    }
    &:vertical {
      border-top: 1 solid @accent;
      height: 0;
      margin: 1 0;
    }
  }
  & QLabel {
    margin-top: 1;
  }
  & QToolBar {
    border: 0;
  }
}

QToolButton {
  &:extend(.button-tool all);
  margin-left: 1;
  margin-right: 1;
  padding: 0;
  &::menu-indicator {
    image: none;
  }
  &::menu-button {
    border-image: none;
  }
  &#qt_toolbar_ext_button {
    padding: 0;
    border: 0;
    margin: 0;
    qproperty-icon: url('@{img-url}/toolbar_extension_horizontal.png');
    &:hover {
      background-color: @button-bg-color-hover;
    }
    &:pressed {
      background-color: @button-bg-color-checked;
    }
  }
}

.DvScrollWidget {
  & QPushButton {
    background-color: @button-bg-color;
    border: 0 solid @accent;
    border-radius: 0;
    padding: 0;
    max-width: 16;
    &:hover {
      background-color: @button-bg-color-hover;
    }
    &:pressed {
      background-color: @button-bg-color-pressed;
    }
  }
}

DvScrollWidget {
  /* Multiple classes can use the same style as DvScrollWidget, and
    since the compiler can't handle extending to Qt names we place the
    style in a mixin and extend the name to it instead. */
  &:extend(.DvScrollWidget all);
}

#ScrollLeftButton,
#ScrollRightButton,
#ScrollUpButton,
#ScrollDownButton {
  &:extend(.DvScrollWidget all);
  margin: 0;
  min-width: 16;
}

#ScrollLeftButton {
  border-right: 1 solid @accent;
  image: url('@{img-url}/scroll-left.svg');
}
#ScrollRightButton {
  border-left: 1 solid @accent;
  margin-left: 3;
  image: url('@{img-url}/scroll-right.svg');
}
#ScrollUpButton {
  image: url('@{img-url}/scroll-up.svg');
}
#ScrollDownButton {
  image: url('@{img-url}/scroll-down.svg');
}

/* -------------------------------------------------------------------------- */

/* For the buttons to display a BG color we need to set a blank image, setting
   an empty URL solves this. */
#keyFrameNavigator {
  background: transparent;
  margin: 0;
  padding: 0;
  #PreviousKey {
    margin: 0 2;
    padding-right: -1;
    width: 20px;
    height: 20px;
    image: url('');
	  &:disabled {
		  image: url('');
	  }
  }
  #NextKey {
    margin: 0 2;
    padding-right: -1;
    width: 20px;
    height: 20px;
    image: url('');
	  &:disabled {
		  image: url('');
	  }
  }
  #KeyNo,
  #KeyPartial,
  #KeyTotal {
    margin: 0;
    padding-right: -1;
    width: 20px;
    height: 20px;
    image: url('');
    &:disabled {
      image: url('');
    }
  }
  #KeyNo {
    background-color: @keyframe-off-color;
    border: 1 solid @keyframe-off-border-color;
    image: url('');
    &:disabled {
      image: url('');
    }
    &:hover {
      background-color: @keyframe-off-color-hover;
      border-color: @keyframe-off-border-color-hover;
    }
  }
  #KeyPartial {
    background-color: @keyframe-partial-color;
    border: 1 solid @keyframe-partial-border-color;
    image: url('');
    &:hover {
      background-color: @keyframe-partial-color-hover;
      border-color: @keyframe-partial-border-color-hover;
    }
  }
  #KeyTotal {
    background-color: @keyframe-total-color;
    border: 1 solid @keyframe-total-border-color;
    &:hover {
      background-color: @keyframe-total-color-hover;
      border-color: @keyframe-total-border-color-hover;
    }
  }
  & QToolButton#qt_toolbar_ext_button {
    // adjust for style
    padding-bottom: 3;
    border-radius: 2;
  }
}

/* -----------------------------------------------------------------------------
   Tabs
----------------------------------------------------------------------------- */

QTabWidget::Pane {
  position: absolute;
  top: -1; // move border under tabs
  &:extend(.frame all); // frame border
  margin: 0 3 3 3;
}

QTabBar {
  background-color: transparent;
  &::tab {
    &:extend(.tab-round all);
    &::first {
      margin-left: 3px;
    }
  }
  & QToolButton {
    /* Scroll buttons */
    margin: 0;
    background-color: @bg;
    border-radius: 0;
    border: 1 solid @accent;
    border-top: 0;
    padding: 3 2 2 2;
    &:hover, &:pressed {
      border-color: @accent;
    }
    &:disabled {
      color: @text-color-disabled;
    }
  }
}

#TabBarContainer {
  // Panels: Palette, Style Editor, Fx Editor, etc.
  .tab-container;
  & QTabBar {
    &::tab {
      &:extend(.tab-flat all);
    }
  }
}

/* -----------------------------------------------------------------------------
   Item Tree
----------------------------------------------------------------------------- */

.treeview {
  background-color: @tree-bg-color;
  alternate-background-color: @tree-bg-color-alt;
  border: 0;
  margin: 0;
  outline: 0;
  
  &::item {
    &:selected {
      .hl-color;
    }
  }
  
  &::branch {
    /* A blank URL may not hide the Qt branch style in Linux, so we add
       a transparent PNG which does. */
    @blank_img: '@{img-url}/transparent_16x16.png';

    &:adjoins-item {
      border-image: url('@{blank_img}');
    }
    &:has-siblings {
      border-image: url('@{blank_img}');
      &:adjoins-item {
        border-image: url('@{blank_img}');
      }
    }
    &:has-children {
      &:closed {
        background: url('@{img-url}/treebranch-closed.svg') no-repeat;
        background-position: center center;
        border-image: none;
        image: none;
      }
      &:open {
        background: url('@{img-url}/treebranch-open.svg') no-repeat;
        background-position: center center;
        image: none;
      }
      &:has-siblings {
        &:closed {
          background: url('@{img-url}/treebranch-closed.svg') no-repeat;
          background-position: center center;
          border-image: none;
          image: none;
        }
        &:open {
          background: url('@{img-url}/treebranch-open.svg') no-repeat;
          background-position: center center;
          border-image: none;
          image: none;
        }
      }
    }
  }
}

QTreeWidget,
QTreeView {
  &:extend(.treeview all);
}

QListView {
  outline: 0; // hide focus border
  background: @tree-bg-color;
  alternate-background-color: @tree-bg-color-alt;
}

/* -----------------------------------------------------------------------------
   Tool Options - Override DvScroll Widget
----------------------------------------------------------------------------- */

#toolOptionsPanel {
  QPushButton {
    background-color: @button-bg-color;
    border: 1 solid @button-border-color;
    border-radius: 2;
    color: @button-text-color;
    margin: 0;
    padding: 0;
    &:hover {
      background-color: @button-bg-color-hover;
      border-color: @button-border-color-hover;
      color: @button-text-color-hover;
    } 
    &:pressed {
      background-color: @button-bg-color-pressed;
      border-color: @button-border-color-pressed;
      color: @button-text-color-pressed;
    }
    &:checked {
      background-color: @button-bg-color-checked;
      border-color: @button-border-color-checked;
      color: @button-text-color-checked;
      &:hover {
        background-color: @button-bg-color-checked-hover;
        &:pressed {
          background: @button-bg-color-checked-hover-pressed;
        }
      }
    }
    &:disabled {
      background-color: @button-bg-color-disabled;
      border-color: @button-border-color-disabled;
      color: @button-text-color-disabled;
    }
  }
}

/* -----------------------------------------------------------------------------
   QHeaderView
----------------------------------------------------------------------------- */

QHeaderView::section {
  background-color: @browser-itemview-col-color;
  border: 1 solid @browser-itemview-col-border-color;
  padding-left: 4;
  margin-left: -1;
  margin-top: -1;
}

QTreeWidget {
  background-color: @browser-itemview-bg-color-alt;
  border: 1 solid @accent;
}