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

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#spell-palette-view
  position: absolute
  padding-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
  
  .code-palette-background
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: -1
    
  span.code-palette-background
    border-width: 25px
    border-image: url(/images/level/code_palette_background.png) 25 fill round

  img.code-palette-background
    display: none

  &.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

  &.hero .properties
    @include flexbox()
    @include flex-wrap()
    @include flex-column()
    @include flex-align-content-start()

    .property-entry-item-group
      display: inline-block
      min-height: 38px
      max-width: 212px
      @include flexbox()
      @include flex-wrap()
      @include flex-center()
      outline: 1px dashed #b86
      position: relative
  
      img.item-image
        width: 38px
        height: 38px
        position: absolute

      &:not(:hover) img.item-image
        -webkit-filter: sepia(100%)
        filter: sepia(100%)
  
      .spell-palette-entry-view
        margin-left: 38px
        width: 174px
        width: -webkit-calc(100% - 38px)
        width: calc(100% - 38px)

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

    &.javascript
      background-image: url(/images/common/code_languages/javascript_icon.png)
    &.python
      background-image: url(/images/common/code_languages/python_icon.png)
    &.coffeescript
      background-image: url(/images/common/code_languages/coffeescript_icon.png)
    &.clojure
      background-image: url(/images/common/code_languages/clojure_icon.png)
    &.lua
      background-image: url(/images/common/code_languages/lua_icon.png)
    &.io
      background-image: url(/images/common/code_languages/io_icon.png)

    &:hover
      outline: 1px outset #ccc

      &:active
        outline: 1px inset #ccc

html.no-borderimage
  #spell-palette-view
    span.code-palette-background
      display: none
    img.code-palette-background
      display: block