@import '../../../../styles/common';
@import '../../../../styles/vendor/bootstrap_foundation-sites';

.ugly {
  .m-message-pi__metaphor,
  .m-message-pi__meter {
    border-color: map_get($privacy-palette-high, 'ugly');
  }

  .m-message-pi__numeric-value {
    color: map_get($privacy-palette, 'ugly');
  }
}

.bad {
  .m-message-pi__metaphor,
  .m-message-pi__meter {
    border-color: map_get($privacy-palette-high, 'bad');
  }

  .m-message-pi__numeric-value {
    color: map_get($privacy-palette, 'bad');
  }
}

.good {
  .m-message-pi__metaphor,
  .m-message-pi__meter {
    border-color: map_get($privacy-palette-high, 'good');
  }

  .m-message-pi__numeric-value {
    color: map_get($privacy-palette, 'good');
  }
}

.super {
  .m-message-pi__metaphor,
  .m-message-pi__meter {
    border-color: map_get($privacy-palette-high, 'super');
  }

  .m-message-pi__numeric-value {
    color: map_get($privacy-palette, 'super');
  }
}

.m-message-pi {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  &__pi-score {
    width: 10rem; // compat with aside
  }

  &__progress {
    height: map_get($co-pi-height, 'progressbar');
    margin-bottom: 0;

    &--ugly {
      background-color: map_get($privacy-palette-high, 'ugly');
    }

    &--bad {
      background-color: map_get($privacy-palette-high, 'bad');
    }

    &--good {
      background-color: map_get($privacy-palette-high, 'good');
    }

    &--super {
      background-color: map_get($privacy-palette-high, 'super');
    }
  }

  &__meter {
    flex-grow: 1;
    width: 45%;
    border-bottom: 2px solid #999;

    &--no-separator {
      border-bottom: none;
    }
  }

  &__progress-meter {
    height: map_get($co-pi-height, 'progressbar');

    &--ugly {
      background-color: map_get($privacy-palette, 'ugly');
    }

    &--bad {
      background-color: map_get($privacy-palette, 'bad');
    }

    &--good {
      background-color: map_get($privacy-palette, 'good');
    }

    &--super {
      background-color: map_get($privacy-palette, 'super');
    }
  }

  &__numeric {
    display: flex;
    align-items: center;

    &-legend {
      font-size: $co-font__size--xsmall;
    }

    &-value {
      flex-grow: 1;
      font-size: $co-font__size--large;
      font-weight: 500;
      text-align: right;
    }
  }

  &__illustration {
    display: flex;
    flex-direction: row;
    width: 45%;
    margin-bottom: 0.825rem;

    img,
    i {
      margin-right: 0.25rem;
      font-size: $co-font__size--small;
    }
  }

  &__types {
    li {
      font-size: $co-font__size--xsmall;
      font-weight: 600;
      line-height: 1rem;

      &.super {
        color: map_get($privacy-palette, 'super');
      }

      &.good {
        color: map_get($privacy-palette, 'good');
      }

      &.bad {
        color: map_get($privacy-palette, 'bad');
      }

      &.ugly {
        color: map_get($privacy-palette, 'ugly');
      }
    }
  }

  &__metaphor {
    color: #999;
    font-size: $co-font__size--small;
    font-style: italic;
  }

  @include breakpoint(medium) {
    &__illustration,
    &__meter,
    &__numeric {
      width: 100%;
    }

    &__metaphor {
      width: 100%;
      padding-bottom: map_get($co-margin_, 'xsmall');
      border-bottom: 2px solid #999;
      font-size: $co-font__size--xsmall;
    }
  }
}
