@import "{design}/app.styl"

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

.layoutChooser
  theme('background', '$uiGrayDarkest', 0.95)
  border: 1px solid $borderColor;
  border-radius: 8px
  height: 92px
  min-height: 92px
  min-width: 92px // to override bootstrap's dropdown-menu class
  padding: 5px 0;
  position: absolute;
  width: 92px
  z-index: 5000

  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')