.customer-tips-container {
  .tui-reported-tip-button {
    display: block;
  }

  @include breakpoint(lg) {
    width: 50%;
    padding-right: 0;
  }
}

.customer-tips-empty-state {
  border: 1px solid $color-beige-200;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: $margin-double;
}

.customer-outer-container {
  &.customer-tips-empty-state {
    margin-top: 20px;
  }

  @include breakpoint(lg) {
    display: flex;
    flex-direction: column;
  }

  .customer-inner-container {
    @include breakpoint(lg) {
      display: flex;
    }
  }

  .score-box {
    display: inline-block;
    border-radius: $border-radius-normal;
    background: $color-link-blue;
    color: $color-white;
    font-style: normal;
    font-weight: bold;
    padding: 2px 0;
    text-align: center;
    width: 40px;
    margin-right: $margin-normal;
  }

  &.tripadvisor {
    .score-box {
      background: $color-tripadvisor-green;
    }
  }
}

.customer-rating-container {
  .loader {
    align-items: center;
  }

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

  @include breakpoint(lg) {
    width: 50%;
    padding-left: 0;
  }
}

.tui-customer-rating {
  padding: $margin-enterprise $margin-enterprise $margin-half;

  .tui-rating-info {
    a {
      color: inherit;
      text-decoration: underline;
    }
  }
}

.customertips-tab {
  .rating-graph {
    min-width: 80px;
    max-width: 192px;
    width: auto;
  }
}

.customer-tips-switch {
  @extend %flexbox-column;

  @include breakpoint(sm) {
    flex-direction: row;
  }
}

.customer-tips-switch-btn {
  @extend %flexbox-row;
  border-radius: $border-radius-normal;
  padding: $border-radius-normal;
  border: 2px solid $color-beige-200;
  margin: 2px;
  background: transparent;
  color: $color-grey;
  outline: none;
  justify-content: space-between;

  &.active {
    color: $text-color;
    background-color: $color-white;
  }

  .score {
    @extend %flexbox-row;
    align-items: center;
    border-radius: $border-radius-normal;
    padding: $margin-half $margin-normal;
    background: $color-beige-200;
    justify-content: center;
    justify-items: center;
    margin-right: $margin-normal;

    .amount {
      @include font-size(36);
      font-weight: bold;
    }

    .rating-of {
      @include font-size(16);
      display: inline-block;
      padding: $margin-half;
    }
  }

  &.active .score {
    background: $color-link-blue;
    color: $color-white;
  }

  &.tripadvisor.active .score {
    background: $color-tripadvisor-green;
    color: $color-white;
  }

  .right {
    @extend %flexbox-column;
    justify-content: center;
    justify-items: center;
    margin-right: $margin-normal;

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

    strong {
      @include font-size(20);
    }
  }
}