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
  // Height relates to .tab-content height
  padding-top: 35px
  padding-left: 12px
  padding-right: 4px
  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

  .nav > li > a
    padding: 2px 20px 0px 20px
    margin-bottom: 3px

  ul.nav.nav-pills
    li.active a
      background-color: transparent
    &.multiple-tabs li.active a
      background-color: lighten(rgb(230, 212, 146), 10%)
    &.multiple-tabs li:not(.active) a
      cursor: pointer

  .tab-content
    height: 80px
    .nano-pane
      width: 7px
      right: 5px

  //.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
  //  background-color: lighten(rgb(230, 212, 146), 10%)

  .property-entry-column
    display: inline-block
    margin-right: 3px
    vertical-align: top

  .code-language-logo
    position: absolute
    width: 20px
    height: 20px
    left: 12px
    top: 34px
    z-index: 10
    background-color: transparent
    background-repeat: no-repeat
    background-size: contain
    cursor: pointer

    &.javascript
      background-image: url(/images/pages/home/language_logo_javascript.png)
    &.python
      background-image: url(/images/pages/home/language_logo_python.png)
    &.coffeescript
      background-image: url(/images/pages/home/language_logo_coffeescript.png)
    &.clojure
      background-image: url(/images/pages/home/language_logo_clojure.png)
    &.lua
      background-image: url(/images/pages/home/language_logo_lua.png)
    &.io
      background-image: url(/images/pages/home/language_logo_io.png)