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

#tome-view
  height: 100%

  > .popover
    // Only those popovers which are our direct children (spell documentation)
    left: auto !important
    top: auto !important
    right: 100%
    bottom: 151px
    @include user-select(text)
    // Wish I could set max-width and max-height (and override Bootstrap's stuff)
    // but without explicitly setting height, child overflow-y: scroll doesn't work
    min-width: 100%
    height: 60%

    &.pinned
      @include box-shadow(0 0 500px white)

  .popover
    padding: 10px 10px 30px 10px
    background: transparent url(/images/level/popover_background.png)
    background-size: 100% 100%
    border: 0
    @include box-shadow(0 0 0 #000)

    h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
      font-family: Menlo, Monaco, Consolas, "Courier New", monospace

    .popover-title
      background-color: transparent
      margin: 0 14px
      padding: 8px 0
      border-bottom-color: #ccc

    .popover-content
      max-height: 100%
      overflow-y: scroll
      img
        float: right

    &.top .arrow
      bottom: -2%
    &.bottom .arrow
      top: -2%
    &.left .arrow
      right: 0%
    &.right .arrow
      left: -3%

  pre
    display: inline-block
    padding: 5px