@import '~@gemsorg/uikit/colors'
@import '~@gemsorg/uikit/font'

.gem-selectregion
  position: relative;

  &-toggle
    position absolute;
    right: 5px
    top : 5px
    cursor pointer

    .gem-tooltip-orientation-top
      bottom: 35px

    .gem-switch-container
      box-shadow: 0 0 4px 0 color-text-gray-1;


  &-selection
    position: absolute;
    border: 2px dashed color-pink
    background-color: alpha(color-pink, 0.1);


    &-cliparea
      position: absolute;
      top: 0px
      left: 0
      right: -23px
      bottom: 0
      clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%)

  &-drag
    box-sizing: border-box;
    position: absolute;

    width: 10px
    height: 10px

    background-color: darken(color-pink, 40%)
    border: 1px solid lighten(color-pink-light, 50%)

    cursor: pointer;

    border-radius: 5px

    transform: translate(-5px, -5px);

  &-delete
    position: absolute;
    top: -2px
    right: -20px

    height: 20px
    width: 20px
    line-height: 20px

    font-weight: 600
    font-size: 13px;

    box-sizing: border-box;

    color: color-white
    background: color-pink;

    padding: 0

    outline: 0;
    cursor: pointer;

    visibility: hidden;

    .gem-selectregion-selection:hover &
      visibility: visible;