/* -----------------------------------------------------------------------------
   Style Editor
----------------------------------------------------------------------------- */

#StyleEditor {
  & QPushButton {
    // Temporary fix for channel buttons
    margin: 2px 1px;
    padding: 0;
  }
  & #TabBarContainer {
    margin-left: -4px; // Resets container margin
  }
  & #bottomWidget {
    border-top: 1px solid @accent1;
    padding: 3px 2px 8px 3px;
    & QPushButton {
      // Override above fix
      padding: 3px 5px;
    }
  }
}

#StyleEditorTabBar {
  &:extend(.tab-container all); // components/tabs.less
  &::tab {
    &:extend(.tab-flat all); // components/tabs.less
  }
}

#HexagonalColorWheel {
  qproperty-BGColor: @styleeditor-wheel-bg-color;
}

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

/* Horizontal QSlider */

// START: I don't know what #colorSlider does, it seems to have no effect here.

#colorSlider {
  &::groove:horizontal {
    height: 1px;
    border-image: none;
  }
  &::handle:horizontal {
    width: 8px;
    margin: -8px -4px;
  }
}

// ----- End

#colorSliderAddButton, 
#colorSliderSubButton {
  background: none;
  border-color: transparent;
  image-position: center center;
  min-height: 16px;
  padding: 0;
  min-width: 18px;
  &:hover {
    &:extend(.button-tool:hover); // layouts/controls.less
  }
  &:pressed {
    &:extend(.button-tool:pressed); // layouts/controls.less
  }
}

#colorSliderAddButton {
  image: url('@{img-url}/scroll-right.svg');
}

#colorSliderSubButton {
  image: url('@{img-url}/scroll-left.svg');
}

#PlainColorPageParts {
  border-top: 1px solid @accent1;
  & QLineEdit {
    max-width: 35px;
  }
}

#colorSliderLabel, 
#colorSliderField {
}

/* -----------------------------------------------------------------------------
   Palette Viewer / Studio Palette
----------------------------------------------------------------------------- */

PaletteViewer {
  & DvScrollWidget {
    & QPushButton {
      border-top: 0;
      margin-bottom: 1px;
      max-width: 15px;
      min-width: 15px;
    }
    & #ScrollLeftButton {
      border-right: 1px solid @accent1;
      border-left: 1px solid @accent1;
      max-width: 15px;
      min-width: 15px;
    }
    & #ScrollRightButton {
      border-right: 0;
      margin-left: 1px;
      max-width: 15px;
      min-width: 15px;
    }
  }
  & QToolBar {
    background: none;
    border-bottom: 1px solid @tabbar-border-color;
    padding: 0;
    margin: 0;
    &::separator:horizontal {
      // Very compact space - so we can do without margin here...
      margin: 0;
    }
    & QToolButton {
      &:extend(.button-flat all); // components/buttons.less
      margin: 0 0 1px 0; // Adds height to QToolBar
      padding: 1px 1px 2px 1px;
    }
  }
}

#StudioPalette {
  & QTreeView {
    &:extend(.tree-list all); // components/treeviews.less
    &::branch {
      &:extend(.branch-17 all); // components/treeviews.less
    }
  }
}

#PaletteTabBar {
  &:extend(.tab-container all); // components/tabs.less
  &::tab {
    &:extend(.tab-flat all); // components/tabs.less
  }
}

#PageViewer {
  qproperty-TextColor: @text-color;
}

#PaletteLockButton {
  border-radius: 0;
  margin: 0 0 1px 1px;
  &:hover {
    background-color: @paletteviewer-lock-color-active;
    border-color: @paletteviewer-lock-color-active;
  }
  &:checked {
    background-color: @paletteviewer-lock-color-active;
    border-color: @paletteviewer-lock-color-active;
    &:hover {
      background-color: @paletteviewer-lock-color-active-hover;
      border-color: @paletteviewer-lock-color-active-hover;
    }
  }
}

/* -----------------------------------------------------------------------------
   Quick Renamer
----------------------------------------------------------------------------- */

#WordButton {
  &:extend(.QPushButton all); // layouts/controls.less
  // Remove horizontal padding... else moderate length text gets clipped
  padding-right: 0;
  padding-left: 0;
}

#SolidLineFrame {
  &:extend(.box-base all); // components/boxes.less
}