.image-cropper-container
  position: relative
  box-sizing: border-box
  user-select: none

.image-cropper-container img
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%

.image-cropper-mask-container
  position: absolute
  left: 0
  top: 0
  right: 0
  bottom: 0
  overflow: hidden

.image-cropper-mask
  position: absolute
  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
  touch-action: none

.image-cropper-handler
  position: absolute
  width: 26px
  height: 26px
  border: black solid 2px
  border-radius: 50%
  background: white
  touch-action: none

.cru-skeleton
  padding: 0 1em

.cru-skeleton-line
  height: 1em
  background-color: #e6e6e6
  margin: 0.7em 0
  border-radius: 0.2em

  &.last
    width: 50%

.cru-full-page
  position: fixed
  z-index: 1031
  left: 0
  top: 0
  right: 0
  bottom: 0
  background-color: white
  padding-top: 56px

.cru-full-page-top-bar
  height: 56px

  position: absolute
  top: 0
  left: 0
  right: 0
  z-index: 1

  @extend .bg-primary

  display: flex
  align-items: center

.cru-full-page-content-container
  overflow: scroll

.cru-menu
  min-width: 200px

.cru-menu-item
  font-size: 1.2em
  padding: 0.5em 1.5em
  cursor: pointer

  @each $color, $value in $theme-colors
    &.color-#{$color}
      color: $value

      &:hover
        color: white
        background-color: $value

.cru-menu-item-icon
  margin-right: 1em

.cru-menu-divider
  border-top: 1px solid $gray-200

.cru-tab-pages-action-area
  display: flex
  align-items: center