.customer-rating-box {
  display: block;
  padding: $margin-double;
  color: $color-grey;
  background-color: $color-beige-200;
  border-radius: $border-radius-normal;
  min-width: auto;

  @include breakpoint(sm) {
    min-width: 30%;
    margin-left: $margin-triple;
  }

  @include breakpoint(md) {
    min-width: 312px;
    padding: $margin-quadruple $margin-triple;
  }

  .box-title {
    display: flex;
  }

  .box-hr {
    display: none;
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;

    &:after {
      position: absolute;
      display: block;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: $color-beige-300;
      content: '';
    }

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

  .box-heading {
    flex-grow: 0;
    flex-shrink: 0;

    @include breakpoint(sm) {
      padding: 0 $margin-normal;
    }
  }

  .box-heading-label {
    display: inline-block;

    @include breakpoint(sm) {
      display: block;
      text-align: center;
    }
  }

  .box-heading-value {
    display: inline-block;
    font-weight: bold;

    @include breakpoint(sm) {
      display: block;
      text-align: center;
    }
  }

  .box-score {
    margin-top: $margin-normal;

    @include breakpoint(sm) {
      margin-top: $margin-double;
      text-align: center;
    }
  }

  .box-score-label,
  .box-score-value,
  .box-score-total {
    display: inline-block;
    vertical-align: middle;
  }

  .box-score-label {
    @include font-size(24);
    font-weight: bold;
    color: $color-blue-500;
  }

  .box-score-value {
    @include font-size(24);
    margin: 0 $margin-normal;
    padding: $margin-quarter $margin-half;
    border-radius: $border-radius-normal;
    font-weight: bold;
    color: $color-white;
    background-color: $color-blue-400;
  }

  .box-answers {
    margin-top: $margin-normal;

    @include breakpoint(sm) {
      text-align: center;
    }
  }
}