$grid--gap-width: 20px
$grid--header-width: 20px

@mixin grid--commons
  display: grid
  grid-column-gap: $grid--gap-width
  grid-row-gap: $grid--gap-width

.grid--container
  @include grid--commons

.grid--area
  overflow: hidden

  &.-drop-target
    background-color: $gray-light

  &.-resize-target
    z-index: 1000

  &.-widgeted
    z-index: 10
    @include widget-box--style
    margin: 0
    padding: 20px

    .widget-box
      height: 100%

    &:hover icon-triggered-context-menu
      visibility: visible

  &.-resizing
    border: 1px solid $primary-color
    z-index: 100

  &.-addable
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

  &.-placeholder
    pointer-events: none

  &.-dragged
    display: none

  .resizer
    margin-top: 0
    margin-left: auto
    margin-right: -20px
    position: relative

  .cdk-drag-handle
    cursor: grab

  .widget-box--header
    display: flex

  .widget-box--header-title
    flex-grow: 1

  icon-triggered-context-menu
    visibility: hidden

.grid--area-drag-handle
  margin-left: -19px
  padding-right: 1px
  margin-top: 3px
  opacity: 0
  cursor: grab

  &:before
    padding: 0
    color: #888

  .grid--area.-widgeted:hover &
    opacity: 1

.grid--area-content
  height: 100%

  ng-component
    display: flex
    flex-direction: column
    height: 100%

  input[type="text"].toolbar--editable-toolbar
    font-size: 18px
    font-weight: normal

  .title-container
    margin-bottom: 0px

.grid--widget-content
  height: 100%
  overflow-x: auto
  overflow-y: auto

.grid--widget-limited-text
  max-height: 5rem
  position: relative
  overflow: hidden

  &:before
    content: ''
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: linear-gradient(to bottom, rgba($body-background, 0) 60%, rgba($body-background, 1))

.grid--widget-add
  padding: 15px
  background-color: $gray
  border-radius: 50%

  &:before
    @include icon-font-common
    @include icon-mixin-add

.grid--widget-remove
  float: right
  margin-top: -10px
  margin-right: -10px
  cursor: pointer

  &:before
    @include icon-font-common
    @include icon-mixin-remove
    font-size: 0.75em

.grid--column-headers
  @include grid--commons
  grid-template-rows: $grid--header-width

.grid--row-headers
  @include grid--commons
  grid-template-columns: $grid--header-width
  float: left
  margin-left: -$grid--header-width

.grid--header
  background-color: $gray-light
  transition: background-color 4s ease

  &:hover
    background-color: $gray
    transition: background-color 1s ease

.grid--addable-widget
  min-width: 400px
  padding: 20px 5px
  border-bottom: 1px solid $gray
  cursor: pointer
  background: none
  transition: background 4s ease

  &:hover
    background: $gray-light
    transition: background 1s ease

  &:last-of-type
    border-bottom: none