.eddbk-color-picker {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 48px;

  &--full-width {
    width: 100%;
  }

  &--opened {
    z-index: 2;
    .eddbk-color-picker-popup {
      display: block;
    }
  }

  &-input {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid $light-gray;
    background-color: white;
    padding: 1px 2px 3px 5px;

    &__placeholder {
      white-space: nowrap;
      max-width: calc(100% - 20px);
      overflow: hidden;
      padding: 2px 0 0;
      opacity: .8;
    }

    &__square {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      vertical-align: middle;
      margin-right: -2px;
    }

    &__dismiss {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: -1px;
      margin-left: 3px;

      opacity: .5;
      &:hover {
        opacity: .85;
      }
    }

    .dashicons-arrow-down {
      position: absolute;
      right: 4px;
      top: 3px
    }
  }

  &-popup {
    display: none;
    position: absolute;
    top: -5px;
    left: -5px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);

    .vc-sketch, .vc-sketch-active-color {
      box-shadow: none;
    }

    &__buttons {
      border-top: 1px solid #eee;
      padding: 10px;
      text-align: right;
    }
  }
}

.settings-color-input {
  padding: 2px 0;

  &__title {
    vertical-align: middle;
    display: inline-block;
    padding-left: 3px;
  }
}