@import '~assets/styles/variables.sass'

.scroll-container
  max-height: 250px

.content-box
  font-family: 'Source Han Sans SC', 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif

  .row
    .keyword
      text-decoration: underline
      cursor: pointer

      &.definition-keyword
        color: hsl(207, 65%, 65%)

      &.example-keyword
        color: hsl(207, 60%, 75%)

    .definition
      line-height: 20px

  .divider
    height: 1px
    width: 100%

  .thumb
    opacity: 0.7

    &.thumb-down
      transform: translate(0, 3px) rotate(180deg)

.u-toolip
  max-width: 280px
  padding: 5px 8px
  z-index: 2
  transform: translate(calc(-50% - 5px + 15px), 14px + 3px)
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15)) drop-shadow(0 2px 1.2px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 2.2px rgba(0, 0, 0, 0.12))

  .inner-content
    max-height: 21px * 5
    overflow: hidden

  .loadin-spinner
    margin: 6px 0

  @keyframes rotate
    0%
      transform: rotate(0deg)

    100%
      transform: rotate(360deg)

  .rotate
    animation-name: rotate
    animation-duration: 1.2s
    animation-timing-function: linear
    animation-iteration-count: infinite

  &::before
    position: absolute
    content: ''
    top: -10px
    left: 50%
    transform: translate(-50%, 0) scale(1, 1.5) skewX(40deg)
    transform-origin: 50% bottom
    // border-top: 10px solid white
    border-bottom: 10px solid white
    border-left: 10px solid transparent
    border-right: 10px solid transparent
