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

+prefix-classes('mp-sh-v2-')
  .title
    color $grey-300
    display flex
    justify-content space-between

    .heading
      font-weight 700
      text-transform uppercase

  .body
    padding 15px 13px

/*
  mp-details-card manages the style around the slots in the details card.
  children of this component, which are slotted into the details card, should be
  non-shadow DOM components and should be styled here.
*/

+host-styles('mp-smart-hub-alert-v2')
  width 360px

// Shared styles -----------------------------

+prefix-classes('mp-sh-shared-')
  .header
    color $grey-300
    font-family $family-helvetica
    font-size 11px
    font-weight $weight-bold
    margin 20px 0 15px
    position relative
    text-transform uppercase

// Summary ---------------------------------

+prefix-classes('mp-sh-summary-')
  .container
    font-size 13px

  .header
    font-weight $weight-medium

.mp-sh-alert-keyword
  color $grey-700
  font-weight $weight-bold

// Viz -------------------------------------

+prefix-classes('mp-sh-viz-')

  .message
    display block
    font-family $family-helvetica
    font-size 13px

  &.expected-color
    background $grey-900
    color $grey-900

  &.actual-color
    background $blue-700
    color $blue-700

  .container
    width 100%

    .bar-container
      height 20px
      margin-top 30px
      width 100%

      .bar-inner
        display block
        height 20px
        position relative
        width 100%

        &.bar-left
          float left
          .number
            left 0

        &.bar-right
          float right
          .number
            right 0

        .bar-color
          height 10px
          margin 5px 0

          .number
            bottom 20px
            font-family $family-helvetica
            font-size 14px
            position absolute
            text-transform uppercase

    .key
      margin-top 15px

      .color-container
        align-items center
        display flex

        &:not(:last-child)
          padding-bottom 8px

        .color-sample
          display inline-flex
          height 10px
          margin-right 10px
          width 10px

        .color-label
          color $grey-300
          display inline-flex
          font-family $family-helvetica
          font-size 10px
          text-transform uppercase

// Explains ------------------------------

+prefix-classes('mp-sh-explains-')
  .container
    width 100%

    .text
      font-size 13px
      margin-bottom 15px

      .count
        font-weight $weight-bold

    .segments-container
      .link
        align-items center
        display flex
        font-size 12px

        &:not(:first-of-type)
          margin-top 10px

        &:hover
          background-color $grey-100
          cursor pointer

        &.selected

          .link-text
            color black
            font-weight $weight-bold

          &:hover
            background none
            cursor default

        .type-icon
          display inline-block
          margin-left 20px
          svg-icon-style($grey-300, size: 20px)

        .link-text
          display inline-block
          line-height 16px
          margin-left 10px
          overflow-wrap break-word
          padding-right 10px
          vertical-align top
          width 60%

        .strength
          color $grey-300
          font-family $family-helvetica
          font-size 10px
          text-transform uppercase