$black: #000 !default;
$border-color: #e4e8f0 !default;
$body-bg: $background-color !default;
$state-success: $flag-instore !default;
$state-error: $flag-notinstore !default;

$reviews-focus-title-color: $black !default;
$reviews-focus-bg: $body-bg !default;
$reviews-stars-color: $black !default;

.focus-review-form {
   padding-top: 0;

   &.active {
      z-index: 999;
   }

   .focus-header {
      border-bottom: 1px solid $border-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;
      padding-bottom: 12px;
      position: relative;

      .title {
         color: $reviews-focus-title-color;
         font-size: 16px;
      }

      .focus-close {
         position: initial;
      }
   }

   .focus-content {
      padding: 25px 55px;

      @media screen and (max-width: 543px) {
         padding-left: 20px;
         padding-right: 20px;
      }
   }
}

.review-form {
   .title {
      color: $reviews-focus-title-color;
      font-size: 18px;
   }

   .separator {
      position: relative;
      text-align: center;
      margin: 20px 0;

      &::before {
         display: block;
         content: '';
         border-top: 1px solid $border-color;
         width: 100%;
         position: absolute;
         top: 50%;
      }

      span {
         display: inline-block;
         background: $reviews-focus-bg;
         position: relative;
         padding: 0 15px;
      }
   }

   .btn {
      width: 100%;

      .fc {
         color: $state-success;
         margin-right: 10px;
      }

      &:has(.fc) {
         display: flex;
         align-items: center;
         justify-content: center;
      }
   }

   label {
      display: block;

      &[for=pros] {
         color: $state-success;
      }


      &[for=cons] {
         color: $state-error;
      }
   }

   .review-stars-picker {
      display: inline-block;

      label {
         color: $reviews-stars-color;
         margin-bottom: 0;
      }

      &:not(:checked) > input {
         opacity: 0;
         position: absolute;
         z-index: -1;
      }

      &:not(:checked) > label {
         @include fonticon;

         cursor: pointer;
         font-size: 20px;
         margin-right: 5px;
         overflow: hidden;
         float: right;
         padding: 0;
         position: relative;
         top: -2px;
         white-space: nowrap;
         width: 1em;

         &::before {
            content: $icons_star_empty;
         }

         &:hover,
         &:hover ~ label {
            &::before {
               content: $icons_star_full;
            }
         }
      }

      > input:checked ~ label {
         &::before {
            content: $icons_star_full;
         }
      }

      > input:checked + label:hover,
      > input:checked + label:hover ~ label,
      > input:checked ~ label:hover,
      > input:checked ~ label:hover ~ label,
      > label:hover ~ input:checked ~ label {
         color: darken($reviews-stars-color, 10%);
      }

      .form-control-feedback {
         display: none !important;
      }
   }

   .unverified-review-link {
      margin-bottom: 0;
      margin-top: 1rem;
      text-align: center;

      > a {
         @include underline-default;
      }
   }
}
