.generator {
  width: 60vmin;
  height: 60vmin;
  border: 2px dashed rgba($white,0.4);
  position: relative;
  z-index: 3;
  margin-left: auto;
  margin-right: auto;

  @media screen and (min-width: 31.875rem) {
    width: 50vmin;
    height: 50vmin;
  }

  &__shape {
    width: 100%;
    height: 100%;
    background: $pink;
    background-image: linear-gradient(45deg, $purple 0%, $pink 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    box-shadow: -10vmin 10vmin 0 rgba(255,255,255,0.07);

    &--8v {
      border-radius: 10%;
      background-image: linear-gradient(-225deg, $white 0%, rgba($white, 0) 40%, rgba(0,255,255, 0) 60%, #0ff 100%), linear-gradient(45deg, $purple 0%, $pink 100%);
    }
  }

  &__handle {
    display: block;
    position: absolute;
    cursor: pointer;
    width: $handle-outer-width;
    height: $handle-outer-width;

    &:before {
      content: "";
      position: absolute;
      width: $handle-inner-width;
      height: $handle-inner-width;
      left: ($handle-outer-width - $handle-inner-width) / 2;
      top: ($handle-outer-width - $handle-inner-width) / 2;
      background: $white;
      border: 2px solid $black;
      transition: box-shadow 0.2s ease-out;
      will-change: box-shadow;
    }

    &--second:before {
      background: $purple;
      border: 2px solid $white;
    }

    &--third:before {
      background: $pink;
      border: 2px solid $white;
    }

    &--fourth:before {
      background: #0ff;
    }

    &--8v.active:before,
    &--8v:hover:before {
      box-shadow: 0 0 0 4px #FFF;
      border: 2px solid $black;
    }

    &:not(.generator__handle--8v).active:before,
    &:not(.generator__handle--8v):hover:before {
      background: #0ff;
      box-shadow: 0 0 0 4px #FFF;
      border: 2px solid $black;
    }
  }
  #top {
    top: -($handle-outer-width / 2);
    left: 30%;
    transform: translateX(-50%);

    &.generator__handle--8v {
      left: 10%;
    }
  }
  #bottom {
    bottom: -($handle-outer-width / 2);
    left: 30%;
    transform: translateX(-50%);

    &.generator__handle--8v {
      left: 10%;
    }
  }
  #left {
    left: -($handle-outer-width / 2);
    top: 30%;
    transform: translateY(-50%);

    &.generator__handle--8v {
      top: 10%;
    }
  }
  #right {
    right: -($handle-outer-width / 2);
    top: 30%;
    transform: translateY(-50%);

    &.generator__handle--8v {
      top: 10%;
    }
  }
  #topRight {
    top: -($handle-outer-width / 2);
    left: 90%;
    transform: translateX(-50%);
  }
  #bottomRight {
    bottom: -($handle-outer-width / 2);
    left: 90%;
    transform: translateX(-50%);
  }
  #leftBottom {
    left: -($handle-outer-width / 2);
    top: 90%;
    transform: translateY(-50%);
  }
  #rightBottom {
    right: -($handle-outer-width / 2);
    top: 90%;
    transform: translateY(-50%);
  }
}