.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

.app-bar
  display: flex
  align-items: center
  height: 56px

  position: fixed
  z-index: 1030
  top: 0
  left: 0
  right: 0

  background-color: var(--tl-primary-color)

  transition: background-color 1s

  a
    color: var(--tl-text-on-primary-inactive-color)
    text-decoration: none
    margin: 0 1em

    &:hover
      color: var(--tl-text-on-primary-color)

    &.active
      color: var(--tl-text-on-primary-color)

.app-bar-brand
  display: flex
  align-items: center

.app-bar-brand-icon
  height: 2em

.app-bar-main-area
  display: flex
  flex-grow: 1

.app-bar-link-area
  display: flex
  align-items: center
  flex-shrink: 0

.app-bar-user-area
  display: flex
  align-items: center
  flex-shrink: 0
  margin-left: auto

.small-screen
  .app-bar-main-area
    position: absolute
    top: 56px
    left: 0
    right: 0

    transform-origin: top
    transition: transform 0.6s, background-color 1s

    background-color: var(--tl-primary-color)

    flex-direction: column

    &.app-bar-collapse
      transform: scale(1,0)

    a
      text-align: left
      padding: 0.5em 0.5em

  .app-bar-link-area
    flex-direction: column
    align-items: stretch

  .app-bar-user-area
    flex-direction: column
    align-items: stretch
    margin-left: unset

  .app-bar-avatar
    align-self: flex-end

.app-bar-toggler
  margin-left: auto
  font-size: 2em
  margin-right: 1em
  color: var(--tl-text-on-primary-color)
  cursor: pointer
  user-select: 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

.cru-search-input
  display: flex
  flex-wrap: wrap