.color-picker {
  width: 30px;
  margin-right: 5px;
  float: left;
  vertical-align: middle;
  z-index: 10;

  button.colors-opener {
    height: 25px;
    width: 25px;
    margin: 0px;
    padding: 0;
    border-radius: 50%;
    background-image: url("../../img/icons/colorpicker.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: inline-block;
    float: left;
    opacity: 1;
    @include run-transition(all);
    &:hover {
      transform: rotate(180deg);
      opacity: 1;
    }
  }

  .colors-list {
    overflow: hidden;
    height: 0;
    width: 0;
    float: left;
    padding-left: 10px;
    border-radius: 5px;
    @include run-transition(width);

    button {
      margin: 10px 7px 0 0;
      height: 15px;
      width: 15px;
      padding: 0 !important;
      border-radius: 50%;
      border: 1px solid transparent;
      box-sizing: border-box;
      box-shadow: none;
      @include run-transition(all);
    }
    button:hover {
      border: 1px solid $primary;
      transform: scale(1.3);
    }
  }

  button.transparent {
    border: 1px solid $medium-grey;
    background: url("../../img/icons/transparent_color.png");
  }
  button.white {
    background: $white;
    border: 1px solid $medium-grey;
  }
  button.black {
    background: $black;
  }
  button.pink,
  button.red {
    background: $red;
  }
  button.purple {
    background: $purple;
  }
  button.blue {
    background: $cyan;
  }
  button.green {
    background: $green;
  }
  button.orange {
    background: $orange;
  }
}

.color-picker.opened {
  width: auto;
  .colors-list {
    width: 180px;
    height: 33px;
  }
}