@import '~mixpanel-common/stylesheets/mixins/common.styl'

.code-tip
  .code-tip-wrapper
    position absolute
    left -10px
    top -10px

    .code-tip-btn
      background-color $grey-50
      border-radius 5px
      color $grey-300
      cursor pointer
      padding 2px 4px 5px 4px
      position relative

      &:hover
        background-color $grey-200
        color $grey-500
      &.open
        background-color $grey-500
        color $grey-150
      &::after
        content '{ }'

      mp-formatted-message.code-tip-src
        font-family Monaco, monospace
        font-size 12px
        line-height 18px
        text-align left
        white-space pre

        span.node
          color $blue-100
        span.selector
          color $mp-turquoise
        span.key
          color $grey-50
        span.lit
          color $green-300
        span.str
          color $yellow-300
        span.sep
          color $grey-300