.color-picker {
  display: inline-block;
  position: relative; // will constrain popover position

  .color-indicator {
    display: inline-block;
    margin-left: 2px;
    height: 10px;
    width: 10px;
    border-radius: @border-radius-small;
    border: 1px solid rgba(0, 0, 0, 0.25);
  }

  // position color picker popover
  .twitter-picker {
    left: 0;
    top: 100%;
    z-index: @zindex-popover;
    margin-top: 10px; // height of the popover tip
    box-sizing: content-box; // this is required because we add a border (picker is fixed width and it breaks the display)

    // the library uses inline styles
    // todo : we should create our own component to avoid this
    position: absolute !important;
    border-radius: @popover-border-radius !important;
    box-shadow: @popover-box-shadow !important;
    background-color: @popover-bg !important;
    background-clip: padding-box !important;
    border: 1px solid @popover-border-color !important;
  }
}

// integration into input-groups (because of the extra .color-picker tag)
// this is a huge copy/paste from bootstrap `input-groups.less`
.input-group-btn {
  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .color-picker {
    + .btn,
    + .color-picker {
      margin-left: -1px;
    }

    // Bring the "active" button to the front
    .btn:hover,
    .btn:focus,
    .btn:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .color-picker {
      margin-right: -1px;
    }
  }
  &:last-child {
    > .color-picker {
      z-index: 2;
      margin-left: -1px;
    }
  }
}

// Reset rounded corners
.input-group-btn:first-child > .color-picker > .btn,
.input-group-btn:first-child > .btn-group > .color-picker > .btn,
.input-group-btn:last-child > .color-picker:not(:last-child) > .btn,
.input-group-btn:last-child > .btn-group:not(:last-child) > .color-picker > .btn {
  .border-right-radius(0);
}

.input-group-btn:last-child > .color-picker > .btn,
.input-group-btn:last-child > .btn-group > .color-picker > .btn,
.input-group-btn:first-child > .color-picker:not(:first-child) > .btn,
.input-group-btn:first-child > .btn-group:not(:first-child) > .color-picker > .btn {
  .border-left-radius(0);
}
