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

selected()
  .gem-imagetiles-tile-selected &
    {block}

.gem-imagetiles
  position: relative;
  box-sizing: border-box;
  width: 100%;

  &-image
    width: 100%
    margin: 0
    padding: 0

  &-tiles
    box-sizing: border-box;

    position: absolute;
    left: 0
    top: 0
    right: 0
    bottom: 0

  &-tile
    position: absolute;
    display: block;
    box-sizing: border-box;

    background-color: transparent;
    border: 1px solid color-white

    box-shadow: inset 0 0 3px 0 darken(color-text-gray-1, 30%);

    transition: background-color  .2s
    cursor: pointer;

    &:hover
      background-color: rgba(255, 255, 255, 0.2)


    &-selected
      background-color: rgba(255, 255, 255, 0.3)

      &:hover
        background-color: rgba(255, 255, 255, 0.3)

    &-checkmark
      display: inline-block;
      background-color: color-green;

      box-sizing: border-box;

      width: 20px
      height: 20px

      text-align: center;

      margin-left: 5px
      margin-top: 5px

      border-radius: 50%

      opacity: 0
      transition: opacity  .2s

      box-shadow: 0 -1px 24px 0 rgba(0, 0, 0, 0.05)

      svg
        width: 12px
        height: 15px

      path
        fill: color-white

      +selected()
        opacity: 1