.tui-rating-pill {
  border-radius: $border-radius-half;
  display: inline-flex;
  height: $margin-double;
  margin-bottom: $margin-normal;
  text-decoration: none;

  .pictogram-tui-smile {
    margin: 0 $margin-quarter;
  }
}

.flag-breadcrumb {
  .tui-rating-pill {
    display: none;
    margin-bottom: 0;
  }
}

.tui-smile-rating {
  background: $color-blue-100;
  margin-right: $margin-normal;

  .rating-text {
    background: $color-blue-400;
  }
}

.tui-tripadviser-rating {
  background: $color-tripadvisor-green-light;

  .rating-text {
    background: $color-tripadvisor-green;
  }
}

.tripadvisor-icon-small {
  height: $margin-double;
  width: $margin-double;
  align-self: center;
  margin: 0 $margin-third;
  flex-shrink: 0;
}

.rating-text {
  @include font-size(16);
  color: $color-white;
  width: 100%;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  display: flex;
  padding: 0 $margin-half;
  align-items: baseline;
}

.rating-fixed-score {
  padding-top: 2px;
}

.rating-small-text {
  @include font-size(12);
  opacity: .7;
  font-weight: bold;
  color: $color-white;
  align-self: inherit;
}

.rating-answers {
  margin-left: $margin-half;
}

@include breakpoint(sm) {
  .flag-breadcrumb {
    .tui-rating-pill {
      display: inline-flex;
    }
  }

  .tui-rating-pill {
    height: $margin-triple;
    border-radius: $border-radius-normal;

    .pictogram-tui-smile {
      margin: 1px $margin-half 0;
      width: 32px;
      height: 32px;
    }

    .tripadvisor-icon-small {
      height: 32px;
      width: 32px;
    }
  }

  .rating-text {
    @include font-size(24);
  }

  .rating-small-text {
    @include font-size(18);
    padding-top: $margin-quarter;
  }

  .rating-answers {
    @include font-size(14);
  }
}

// TUI T: rating move to own file later

.classification-rating {
  height: 24px;
  width: 90px;
  border-radius: $border-radius-half;
  background-color: $color-blue-100;
  display: inline-flex;
  align-items: center;
  padding: 0 $margin-quarter;
  margin-right: $margin-normal;
}

.classification-character-box {
  width: 16px;
  height: 18px;
  border-radius: $border-radius-half;
  background-color: $color-blue-400;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  &:not(:last-child) {
    margin-right: 1px;
  }

  &.plus {
    background: transparent;

    .classification-character {
      color: $color-blue-400;
      padding-left: 2px;
    }
  }
}

.classification-character {
  @include font-size(14);
  font-weight: bold;
  color: $color-white;
}

@include breakpoint(sm) {
  .classification-rating {
    height: 36px;
    width: 106px;
    padding: 0 $margin-half;
    border-radius: $border-radius-normal;
  }

  .classification-character-box {
    height: $margin-double;
    width: $margin-enterprise;
  }

  .classification-character {
    @include font-size(18);
  }
}