/* stylelint-disable selector-class-pattern */

/* Styles for upgrading the judgeme widget displayed on the product page */
.jdgm-widget {
  /* Heading of the judgeme widget */
  h2 {
    font-family: var(--typography-font-family-heading);
    font-size: var(--font-size-heading-l);
    text-transform: uppercase;
  }

  /* Text and links inside the judgeme widget */
  div,
  a {
    font-family: var(--typography-font-family-body);
    font-size: var(--font-size-b-main);
  }

  .jdgm-rev-widg .jdgm-star {
    color: var(--button-primary-background);
  }

  .jdgm-rev-widg .jdgm-star:not([disabled]):hover {
    color: var(--button-primary-background-hover);

    .light & {
      color: var(--light-200);
    }
  }

  .jdgm-histogram__bar-content {
    background-color: var(--text);
  }

  .jdgm-rev-widg__summary-average,
  .jdgm-rev-widg__summary-total,
  .jdgm-rev-widg__summary-text,
  .jdgm-sort-dropdown,
  .jdgm-rev__author,
  .jdgm-rev__body {
    font-family: var(--typography-font-family-body);
    text-transform: uppercase;
  }

  .jdgm-rev-widg__summary-average-value {
    font-family: var(--typography-font-family-heading);
    text-transform: uppercase;
  }

  .jdgm-rev__author {
    color: var(--text);
  }

  .jdgm-rev__icon::before {
    color: var(--text);
  }

  .jdgm-sort-dropdown-wrapper .jdgm-sort-dropdown,
  .jdgm-sort-dropdown-wrapper .jdgm-sort-dropdown-arrow {
    color: var(--text);
  }
}

.jdgm-write-review-modal {
  .jdgm-write-review-modal__title {
    font-family: var(--typography-font-family-heading);
    font-size: var(--font-size-heading-l);
    text-transform: uppercase;
  }

  .jdgm-write-review-modal__intro,
  .jdgm-write-review-modal__checkbox-input:checked
    + .jdgm-write-review-modal__checkbox-custom,
  .jdgm-write-review-modal__product-title,
  .jdgm-write-review-modal__field-label,
  .jdgm-write-review-modal__gdpr-statement,
  .jdgm-write-review-modal__nav-btn-back,
  .jdgm-write-review-modal__field-help,
  .jdgm-write-review-modal__checkbox-text,
  .jdgm-write-review-modal__media-upload,
  .jdgm-write-review-modal__text,
  .jdgm-write-review-modal__field-error {
    font-family: var(--typography-font-family-body);
    font-size: var(--font-size-b-main);
    text-transform: uppercase;
  }

  .jdgm-write-review-modal__checkbox-input:checked
    + .jdgm-write-review-modal__checkbox-custom {
    background-color: var(--button-primary-background);
    border-color: var(--button-primary-background);
    color: var(--button-primary-text);
  }

  .jdgm-write-review-modal__stars .jdgm-star {
    color: var(--text);
  }

  .jdgm-write-review-modal__checkbox-text {
    font-size: var(--font-size-b-small) !important;
  }

  .jdgm-write-review-modal__stars::before,
  .jdgm-write-review-modal__stars::after {
    font-family: var(--typography-font-family-heading);
    text-transform: uppercase;
  }

  .jdgm-write-review-modal__field-input {
    font-family: var(--typography-font-family-body) !important;

    &::-moz-placeholder {
      font-family: var(--typography-font-family-body);
      text-transform: uppercase;
    }

    &::placeholder {
      font-family: var(--typography-font-family-body);
      text-transform: uppercase;
    }
  }

  .jdgm-write-review-modal__field-help {
    font-size: var(--font-size-b-xsmall) !important;
  }
}

.jdgm-write-review-modal .jdgm-write-review-modal__nav-btn-next,
.jdgm-write-review-modal .jdgm-write-review-modal__nav-btn-close,
.jdgm-widget .jdgm-write-rev-link.jdgm-write-rev-link {
  align-items: center;
  background: var(--button-primary-background);
  border: var(--border-width-main) solid var(--button-primary-border);
  color: var(--button-primary-text);
  display: inline-flex;
  font-family: var(--secondary-secondary-family);
  font-size: var(--font-size-b-main);
  font-style: normal;
  font-weight: 500;
  justify-content: center;
  justify-self: flex-start;
  line-height: 100%;
  padding: 21px var(--space-4) 20px var(--space-4);
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: all var(--transition-duration-default) ease-in-out;

  &:hover,
  &:focus {
    background-color: var(--button-primary-background-hover);
    border-color: var(--button-primary-border-hover);
    color: var(--button-primary-text-hover);
    opacity: 1;
  }

  &:not([disabled]):hover {
    background-color: var(--button-primary-background-hover);
    color: var(--button-primary-text-hover);
  }
}