codecombat/app/styles/play/level/tome/spell_palette.sass

@import "../../../bootstrap/mixins"

#spell-palette-view
  position: absolute
  bottom: 10px
  left: 10px
  right: 10px
  height: 140px
  padding-top: 50px
  // Height and padding-top relate to .tab-content height
  padding-left: 35px
  padding-right: 60px
  // Docs' popovers flicker when too far right, so we have big padding-right
  // twilight: color: #E2E2E2
  color: #333
  // Get crazy with the backgrounds so that we can lower the opacity on the editor background above it, making a gradient of the disabled background color on the top around where it's usually covered
  background-color: transparent
  background-size: 100% 100%
  z-index: 0
  overflow-y: auto
  
  img
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: -1

  &.disabled
    @include opacity(0.80)

  h4
    color: #333
    font-size: 16px
    line-height: 16px
    margin: 0 4px
    font-weight: normal