/* stylelint-disable scss/operator-no-unspaced */
/* stylelint-enable scss/operator-no-unspaced */
/* Breakpoint viewport sizes and media queries.

Breakpoints are defined as a map of (name: minimum width), order from small to large:
   (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

 The map defined in the `$breakpoint` global variable is used as the `$breakpoints` argument by default.

 Name of the next breakpoint, or null for the last breakpoint.

  >> breakpoint-next(sm)
   md
  >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   md
  >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
   md
*/
/* Minimum breakpoint width. Null for the smallest (first) breakpoint.
    >> ecl-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    576px
*/
/* Maximum breakpoint width. Null for the largest (last) breakpoint.
   The maximum value is calculated as the minimum of the next one less 0.1.

   >> ecl-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   767px
*/
/* Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
    Useful for making responsive utilities.

    >> infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    ""  (Returns a blank string)
    >> infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    "-sm"
*/
/* stylelint-disable no-descending-specificity */
/**
 * Rating field
 * @define rating-field
 */
.ecl-rating-field {
  display: inline-flex;
  flex-direction: row-reverse;
}
.ecl-rating-field .ecl-rating-field__input:checked ~ .ecl-rating-field__label .ecl-rating-field__icon-filled, .ecl-rating-field:not(.ecl-rating-field--disabled) > .ecl-rating-field__label:hover .ecl-rating-field__icon-filled, .ecl-rating-field:not(.ecl-rating-field--disabled) > .ecl-rating-field__label:hover ~ .ecl-rating-field__label .ecl-rating-field__icon-filled {
  display: inline-block;
}
.ecl-rating-field .ecl-rating-field__input:checked ~ .ecl-rating-field__label .ecl-rating-field__icon-outline, .ecl-rating-field:not(.ecl-rating-field--disabled) > .ecl-rating-field__label:hover .ecl-rating-field__icon-outline, .ecl-rating-field:not(.ecl-rating-field--disabled) > .ecl-rating-field__label:hover ~ .ecl-rating-field__label .ecl-rating-field__icon-outline {
  display: none;
}

.ecl-rating-field__input {
  border: 0;
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ecl-rating-field:not(.ecl-rating-field--disabled) .ecl-rating-field__input:focus + .ecl-rating-field__label,
.ecl-rating-field:not(.ecl-rating-field--disabled) .ecl-rating-field__input:active + .ecl-rating-field__label {
  outline: 2px solid #0e47cb;
}

.ecl-rating-field__label {
  cursor: pointer;
  margin-right: 0.5rem;
}
.ecl-rating-field--disabled .ecl-rating-field__label {
  cursor: default;
}

.ecl-rating-field__icon-filled {
  display: none;
  fill: #fc0;
}

.ecl-rating-field__icon-outline {
  fill: #707070;
}

/* stylelint-disable-next-line order/order */
@media (min-width: 480px) {
  .ecl-rating-field__label {
    margin-right: 0.25rem;
  }
}
.ecl-rating-field {
  margin-top: 0.75rem;
}

.ecl-rating-field__icon-filled {
  fill: #ffd617 !important;
}

.ecl-rating-field__icon-outline {
  fill: #707070 !important;
}

.ecl-form-label__optional {
  -webkit-margin-start: 0.5rem;
          margin-inline-start: 0.5rem;
}

.ecl-u-sr-only {
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}