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

   Component: Button Styles

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

// Show (+/-) Button

// -----------------------------------------------------------------------------

// A button style for the show more options button

.button-show {

  image: url('@{img-url}/plus.svg');

  image-position: center center;

  margin: 0;

  padding: 1px;

  min-width: 10px;

  min-height: 10px;

  &:checked {

    background-color: @button-bg-color-checked;

    border-color: @button-border-color-checked;

    image: url('@{img-url}/minus.svg');

    &:pressed {

      background-color: @button-bg-color-pressed;

      border-color: @button-border-color-pressed;

    }

    &:hover {

      background-color: @button-bg-color-checked-hover;

    }

  }

}

// Tool Button

// -----------------------------------------------------------------------------

// A button style intended for highlighting selected tools

.button-tool {

  background-color: @toolbutton-bg-color;

  border: 1px solid @toolbutton-border-color;

  border-radius: 2px;

  color: @toolbutton-text-color;

  margin: 1px;

  padding: 0;

  &:hover {

    background-color: @toolbutton-bg-color-hover;

    border-color: @toolbutton-border-color-hover;

    color: @toolbutton-text-color-hover;

  }

  &:pressed {

    background-color: @toolbutton-bg-color-pressed;

    border-color: @toolbutton-border-color-pressed;

    color: @toolbutton-text-color-pressed;

  }

  &:checked {

    background-color: @toolbutton-bg-color-checked;

    border-color: @toolbutton-border-color-checked;

    color: @toolbutton-text-color-checked;

    &:hover {

      background-color: @toolbutton-bg-color-checked-hover;

      border-color: @toolbutton-border-color-checked-hover;

    }

  }

  &:disabled {

    color: @text-color-disabled;

  }

}

// Flat Button

// -----------------------------------------------------------------------------

// A flat button style with no border and no margin

.button-flat {

  background-color: none;

  border: 0;

  border-radius: 0;

  margin: 0;

  &:hover {

    background-color: @toolbutton-bg-color-hover;

  }

  &:pressed {

    background-color: @accent;

  }

}