/* https://codepen.io/rmarren1/pen/mLqGRg.css */
/*-------------------------------*/
/*      Settings                 */
/*-------------------------------*/
$light-gray: #D5D4C7
$dark-gray: #9E9E98
$divider-color: $dark-gray
$divider-width: 2px // gets multiplied by 2
$grid-background-color: $light-gray
$controlpanel-stripe-color1: $light-gray
$controlpanel-stripe-color2: #fff
$grid-flex-proportion: 4
$controlpanel-flex-proportion: 1
$gaps: 0, 1, 2, 5, 10, 25, 50, 100 // possible gap pixel settings
$min-width: calc(1440px - 200px)
$min-height: calc(1000px - 70px)

body
  margin: 0

/*-------------------------------*/
/*      Layout                   */
/*-------------------------------*/
.dui-layout
  height: 100%
  width: 100%
  display: flex
  overflow: auto

/*-------------------------------*/
/*      Grid                     */
/*-------------------------------*/
.dui-grid-wrapper
  flex: $grid-flex-proportion
  background-color: $grid-background-color
  border-left: $divider-width solid $divider-color
  height: 100%
  width: 100%
  overflow: auto

.dui-grid
  display: grid
  box-sizing: border-box
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  height: 100%
  width: 100%

@media (max-width: $min-width)
  .dui-grid
    width: $min-width

@media (max-height: $min-height)
  .dui-grid
    height: $min-height

$class-slug: dui-grid !default

@for $i from 1 through 12
  .#{$class-slug}-#{$i}-rows
    grid-template-rows: repeat($i, 1fr)

@for $j from 1 through 12
  .#{$class-slug}-#{$j}-cols
    grid-template-columns: repeat($j, 1fr)

@each $k in $gaps
  .#{$class-slug}-#{$k}-padding
    grid-gap: #{$k}px

.dui-grid-element
  box-sizing: border-box
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  overflow: auto
  font-size: .8em !important

/*-------------------------------*/
/*      Control Panel            */
/*-------------------------------*/
.dui-controlpanel-wrapper
  flex: $controlpanel-flex-proportion
  border-right: $divider-width solid $divider-color
  overflow: auto
  min-width: 200px
  
  p
    margin-bottom: 0
    padding-top: 10px

  strong
    font-size: 1em
    display: block
    margin: 0 auto
    text-align: center
    padding-top: 5px
    padding-bottom: 5px
    
  label
    display: block
    
  .options-checklist
    max-height: 200px
    overflow-y: auto
  
  textarea
    height: 100px
    width: 100%
  
  ul
    max-height: 200px
    overflow-y: auto
    
  .dui-controlpanel-group
    padding: 10px
    &:nth-child(2n+1)
      background-color: $controlpanel-stripe-color1
    &:nth-child(2n+2)
      background-color: $controlpanel-stripe-color2

  .dui-controlpanel-section-title
    font-size: 1.2em
    font-weight: 700