@import '../../config';

.Rating {
  &:not(.Rating-huge) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 400px;
    margin: auto;

    & > span {
      color: #5a687b;
      font-weight: $font-weight-semi-bold;
      line-height: 20px;
      padding: 0 8px;
    }

    & > span:first-child {
      order: 1;
    }

    & > span:last-child {
      order: 3;
    }

    @include media-up(medium) {
      max-width: initial;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
    }
  }
}

.Rating-stars {
  display: flex;
  width: 100%;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 16px;
  cursor: pointer;

  & > span:first-child {
    margin-right: 0;
  }

  @include media-up(medium) {
    order: 2;
    width: fit-content;
    margin-bottom: 0;
  }
}

.Star {
  color: $color-gray-light;
  font-size: 32px !important;
  order: 0;

  @include media-up(medium) {
    margin-right: 24px;
  }

  &.error {
    color: red;
  }
}

.Star:hover:before,
.Star.selected:before,
.Star:hover ~ .Star:before,
.Star.selected ~ .Star:before {
  color: $color-rating;
  position: absolute;
  content: '\2605';
}

.Rating-huge {
  counter-reset: rating;
  position: relative;
}

.Rating-items {
  display: block;
  width: 100%;
  border: 1px solid $border-grey-color;
  border-radius: 3px;
  box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.03);
  @include media-up(small) {
    display: flex;
  }
}

.Rating-label {
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  margin: 0;
  width: 100%;

  &:first-child .Rating-value {
    border-radius: 3px 0 0 3px;
  }

  &:last-child .Rating-value {
    border-radius: 0 3px 3px 0;
    border-right: none;
  }

  .Rating-input {
    visibility: hidden;
    position: absolute;
  }

  .Rating-value {
    text-align: center;
    background-color: $color-white;
    font-size: $font-size-md;
    height: 50px;
    color: $color-gray;
    border-right: 1px solid $border-grey-color;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &:empty:before {
      counter-increment: rating;
      content: counter(rating);
      display: block;
    }

    &:hover {
      background-color: rgba(224, 224, 227, 0.4);
    }
  }

  .Rating-input:checked + .Rating-value {
    background-color: rgba(224, 224, 227, 0.4);
  }

  @include media-down(small) {
    .Rating-value {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid $border-grey-color;
    }
    &:first-child .Rating-value {
      border-radius: 3px 3px 0 0;
    }

    &:last-child .Rating-value {
      border-radius: 0 0 3px 3px;
      border-bottom: none;
    }
  }
}

.Rating-hints {
  display: flex;
  justify-content: space-between;
  padding: $spacer-sm $spacer-xs;
}

.Rating-hint {
  color: $color-gray;
  font-size: $font-size-sm;
}