@import "{design}/app.styl"

$borderColor = rgba(77, 99, 110, 0.81)

.layoutChooser
  theme('background', '$uiGrayDarkest')
  width: 92px
  height: 92px
  min-width: 92px // to override bootstrap's dropdown-menu class
  min-height: 92px
  // theme('background-color', '$primaryBackgroundColor')
  opacity: 0.95
  border-radius: 8px
  border: 1px solid $borderColor;

  &.open
    display: block

  table
    margin: 0 auto

    td
      theme('border', '1px solid $uiBorderColorDark')
      cursor: pointer
      height: 20px
      transition(background-color 0.1s ease)
      width: 20px

      &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
        theme('background-color', '$activeColor')