.c-layer--selection
  position: relative
  z-index: 4
  pointer-events: none

.c-selection__points,
.c-selection__rules
  +absolute-full

.c-selection__point
  position: absolute
  width: 5px
  height: 5px
  border-radius: 1px
  border: 0.5px solid rgba(0,0,0,0.33)
  background: white
  box-shadow: 0 0px 10px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.5)

.c-selection__point--tl
  left: 0
  top: 0

.c-selection__point--tr
  right: 0
  top: 0

.c-selection__point--tc
  left: 50%
  top: 0

.c-selection__point--lc
  left: 0
  top: 50%

.c-selection__point--rc
  right: 0
  top: 50%

.c-selection__point--bl
  left: 0
  bottom: 0

.c-selection__point--bc
  left: 50%
  bottom: 0

.c-selection__point--br
  right: 0
  bottom: 0

.c-selection__dim
  position: absolute
  height: $unit * 4 // 16
  font-size: $fontSizeXs
  line-height: $unit * 4 // 16
  padding: 0 6px
  border-radius: $unit * 3 // 12
  text-align: center

.c-selection__rule,
.c-selection__rule-leg
  position: absolute

.c-selection__rule--top,
.c-selection__rule--bottom
  +horizontal-center
  width: 1px

  .c-selection__rule-leg
    +horizontal-center
    height: 1px
    width: 10px

.c-selection__rule--top
  .c-selection__rule-leg
    top: 0

.c-selection__rule--bottom
  .c-selection__rule-leg
    bottom: 0

.c-selection__rule--right,
.c-selection__rule--left
  +vertical-center
  height: 1px

  .c-selection__rule-leg
    +vertical-center
    height: 10px
    width: 1px

.c-selection__rule--left
  .c-selection__rule-leg
    left: 0

.c-selection__rule--right
  .c-selection__rule-leg
    right: 0