$grp-pfx: 'grp-' !default;
$grp-close-dim: 15px !default;
$grp-cp-dim: $grp-close-dim !default;
$grp-stop-bg: white !default;
$grp-cp-border: 3px solid $grp-stop-bg !default;
$grp-stop-radius: 100% !default;
$grp-stop-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !default;
$grp-preview-bg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==";

.#{$grp-pfx} {
  &wrapper {
    background-image: url($grp-preview-bg);
  }

  &preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
  }

  &handler {
    width: 4px;
    margin-left: -2px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    height: 100%;

    &-close {
      color: rgba(0, 0, 0, 0.4);
      border-radius: $grp-stop-radius;
      box-shadow: $grp-stop-shadow;
      background-color: $grp-stop-bg;
      text-align: center;
      width: $grp-close-dim;
      height: $grp-close-dim;
      margin-left: -($grp-close-dim/3);
      line-height: 10px;
      font-size: 21px;
      cursor: pointer;

      &-c {
        position: absolute;
        top: -($grp-close-dim + 2px);
      }
    }

    &-drag {
      background-color: rgba(0, 0, 0, 0.5);
      cursor: col-resize;
      width: 100%;
      height: 100%;

      .#{$grp-pfx}handler-selected & {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }

    &-cp {
      &-c {
        display: none;

        .#{$grp-pfx}handler-selected & {
          display: block;
        }
      }

      &-wrap {
        width: $grp-cp-dim;
        height: $grp-cp-dim;
        margin-left: -($grp-cp-dim/2 + 0.5px);
        border: $grp-cp-border;
        box-shadow: $grp-stop-shadow;
        overflow: hidden;
        border-radius: $grp-stop-radius;
        cursor: pointer;

        input[type=color] {
          opacity: 0;
          cursor: pointer;
        }
      }
    }
  }
}