/* ==UserStyle==
@name             DH3 Compact - Magic Fix
@description      The compact look for DH3 - Magic Fix
@namespace        https://github.com/lbrustad
@version          1.0.0
@author           Lasse Brustad
@preprocessor     stylus
@var              range    gridColumns  "Spells per row" [4, 3, 10, 1]
@downloadURL none
==/UserStyle== */

@-moz-document domain("dh3.diamondhunt.co")

  #fighting-screen-magic-area

    > .fighting-screen-magic-area
      display: grid
      grid-template-columns: repeat(gridColumns, 1fr)
      grid-auto-rows: min-content
      grid-gap: 8px
      gap: 8px
      padding: 8px

    [id^="combat-spell-"]

      &[onclick]
        display: grid
        grid-template-columns: 1fr
        grid-template-rows: min-content
        float: none
        height: auto

        > div
          position: static
          text-align: right
          width: auto
          height: auto
          place-self: end
          margin: 4px
          grid-area: 1 / 1 / -1 / -1
          display: block !important
          text-shadow: 2px 1px 4px black

          > *
            margin: 0
            padding: 0

        > [id$="icon"]
          width: 100%
          height: auto
          grid-area: 1 / 1 / -1 / -1