.tui-customer-rating {
  margin-bottom: $margin-double;

  .tui-rating-score strong {
    @include breakpoint(sm) {
      @include font-size(34);
    }
  }
}

.tui-rating-info {
  color: $color-grey;
}

.tui-rating {
  @extend %flexbox-row;
  align-items: baseline;
}

.tui-rating-heading {
  margin-right: $margin-normal;
}

.tui-rating-score {
  strong {
    @include font-size(24);
    color: $color-link-blue;
  }
}

.tui-rating-details {
  margin: 0;

  .item {
    margin-bottom: $margin-normal;

    @include breakpoint(sm) {
      display: flex;
    }
  }

  h4 {
    margin-bottom: $margin-half;

    @include breakpoint(sm) {
      width: 120px;
      text-align: right;
    }
  }

  .rating-graph-wrap {
    @extend %flexbox-row;
  }

  .rating-graph {
    background: $color-tui-grey-25;
    width: 90%;
    border-radius: 40px;
    border: 6px solid $color-white;
    height: $margin-double;
    align-items: center;
    box-shadow: 0 -1px 1px -1px rgba($color-black, .3);

    span {
      background: $color-blue-300;
      border-radius: 10px;
      display: inline-block;
      height: $margin-normal;
      margin-bottom: $margin-half;
    }

    @include breakpoint(sm) {
      width: 192px;
      margin-left: $margin-double;
    }
  }

  .rating-score {
    color: $color-blue-300;
    font-weight: bold;
    margin-left: $margin-normal;

    @include breakpoint(sm) {
      margin-left: $margin-double;
    }
  }
}

.tripadvisor {
  .tui-rating-score {
    strong {
      color: $color-tripadvisor-green;
    }
  }

  .tui-rating-details {
    .rating-score {
      color: $color-tripadvisor-green;
    }

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

.tripadvisor-rating-image {
  width: 50%;
  margin: $margin-normal 0;
}