$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, &.-resize-target
    background-color: rgba(10, 10, 10, 0.1)

  &.-resize-target
    z-index: 1000

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

  &.-resizing
    border: 1px solid red
    z-index: 100

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

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

  .cdk-drag-handle
    cursor: grab

.grid--widget-add
  padding: 20px
  background-color: rgba(10, 10, 10, 0.1)
  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--top-headers
  @include grid--commons
  grid-template-rows: $grid--header-width
  margin-left: $grid--header-width

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

.grid--header
  background-color: rgba(10, 10, 10, 0.1)