@dropdown-icon-width: 30px;
.color {

    .color-drop {
      display: block;
      width: @dropdown-icon-width;
      height: 100%;
      text-align: center;

      position: absolute;
      z-index: 4;
      right: @addon-icon-width-space + @horizontal-label-input-gap;
      cursor: pointer;
      background-color: @enterprise-blue;
      .noselect;
      &:after {
        content: "\f078";
        font-family: 'FontAwesome';
        font-style: normal;
        .font-size(8);
        line-height: 23px;
        color: @black090;
        @media @desktop {
          line-height: 32px;
        }
      }

      &:hover, &:active {
        &:after {
          color: @white;
        }
      }
      &:active {
        background-color: @blue;
      }
    }

    .add-on {
      height: 100%;
      width: 30px;
      line-height: normal;
      margin: 0;
      top: 0;
      right: 0;
      cursor: pointer;
      z-index: 4;
      .color-picker, .simpleColorContainer {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
}
.simpleDefaultColor {
  width: 20px;
  height: 20px;
  float: left;
  + p {
    padding-left: 25px;
    line-height: 20px;
    text-align: left;
  }
}