@import '../helpers/helpers';

.page-rate-review {

  .page-header__title {
    @include media-breakpoint-down(sm) {
      margin-top: 50px;
    }
  }
}

.rate-review {
  &__card {

    &.is-active {
      .fa-chevron-up {
        transform: rotate(180deg);
      }
    }

    .expandable__wrap {
      display: none;
    }

    &__header {
      text-align: center;
      font-weight: 800;
      padding: 10px 0;
      font-size: 1.1rem;
      color: $white;
      position: relative;

      i,
      svg {
        position: absolute;
        right: 20px;
        top: 14px;
      }

      &.js-toggle {
        cursor: pointer;
      }

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

      &.grey {
        background-color: $gray-bg;
        color: $gray-dark;
      }

      &.highlight {
        color: $blue;
      }
    }

    .yellow {
      color: $yellow;
    }

    .verified {
      display: flex;
      align-items: center;

      .green {
        color: $green;
        margin-right: 5px;
      }
    }

    .star-ratings {
      font-size: 1.2rem;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;

      i,
      svg {
        margin-right: 5px;
      }
    }

    .reviewer {
      font-size: 1.1rem;
    }

    .review {
      &__details {
        position: relative;

        &::before {

          @include media-breakpoint-up(md) {
            content: '';
            width: 1px;
            height: 100%;
            display: block;
            background-color: $gray;
            position: absolute;
            top: 0;
            left: -15px;
          }
        }

        &__title {
          margin-right: 5px;

          @include media-breakpoint-up(md) {
            width: 80px;
            margin-right: 0;
          }
        }
      }
    }
  }

  &__inner {
    background-color: $gray-bg;

    ul {
      margin-left: 1.4rem;

      li {
        margin-bottom: 10px;
        padding-left: 6px;
      }
    }
  }

  &__how-to {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;

    &.even {
      background-color: $gray-bg;
    }
  }
}