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

$mini-pi-bar__height: 6px;
$mini-pi-bar__margin: 1px;
$mini-pi__height: 3 * ($mini-pi-bar__height + ($mini-pi-bar__margin * 2));

.m-pi-ratings {
  max-width: map_get($co-pi-width, 'ratings');
  margin-right: auto;
  margin-left: auto;
  font-size: $co-font__size--xsmall;
  font-weight: 600;

  &__item {
    @include flex-grid-row;

    align-items: center;
    padding-top: $co-component__spacing;
  }

  &__item-name {
    @include flex-grid-size(5);

    padding-right: $co-component__spacing;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    text-transform: uppercase;
  }

  &__item-level {
    @include flex-grid-size(5);

    background: $co-color__fg__back--lower;
  }

  &__item-level-label {
    @include flex-grid-size(2);

    text-align: center;
  }

  &__item-level-bar {
    height: $co-component__height / 3;
    transition: 0.5s width;
    background: $co-color__privacy;
    line-height: $co-component__height / 3;
  }

  &--mini {
    width: $mini-pi__height;
    max-width: $mini-pi__height;
    padding: $co-component__spacing;
    cursor: help;
    box-sizing: content-box;

    &__item {
      display: block;
      width: 100%;
      max-width: 100%;
      padding: $mini-pi-bar__margin 0;
    }

    &__item-level {
      display: block;
      width: 100%;
      max-width: 100%;
    }

    &__item-level-bar {
      height: $mini-pi-bar__height;
    }

    &__item-level-label,
    &__item-name {
      display: none;
    }
  }
}
