@import '../../../stylesheets/defaults'

+host-styles('mp-item-tooltip')
  display block
  position absolute
  z-index $z-tooltip

.root
  background-color $white
  border-radius 6px
  box-shadow 0 3px 7px 0 alpha(black, 0.18)
  color $grey-700
  font-size-default()
  opacity 0
  width 340px

  &.tooltip-in
    opacity 1
    transition all 100ms $ease-out-quart

  &.tooltip-out
    opacity 0
    transition all 100ms $ease-in-quart

  .container
    padding 12px 20px

    .min-height-wrapper
      min-height 200px

    .header
      color $grey-900
      font-weight $weight-bold

    .subheader
      color $grey-500
      margin-top 3px
      font-size-small()

    .description
      margin-top 32px

      &.no-desc
        font-style italic

    .details
      margin-top 32px

      .detail
        $size = 15px
        display flex
        margin-bottom 8px
        font-size-small()

        .icon
          height $size
          margin-right 5px
          svg-icon-style($grey-500, size: $size)
          width $size

        .name
          line-height $size
          margin-right 5px

          &::after
            content ': '

        .value
          line-height $size

    .section
      border-top 1px solid $grey-150
      margin 20px 0 10px
      padding-top 10px

      .name
        font-weight $weight-bold

      .value
        margin-top 8px

    .metrics
      display flex

      .metric
        margin-right 20px

    .composition
      .value
        span
          color grey-500
          line-height 18px
          white-space pre-wrap

          &.highlight
            color $grey-700
            font-weight $weight-medium

  .learn-more
    border-top 1px solid $grey-150
    padding 10px 20px
    font-size-small()

    a
      color $blue-500

      &:hover
        text-decoration underline