/**
 * Rating field
 * @define rating-field
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;
$rating-field: null !default;

.ecl-rating-field {
  display: inline-flex;
  flex-direction: row-reverse;

  &--disabled .ecl-rating-field__input + .ecl-rating-field__label {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .ecl-rating-field__input {
    &:checked,
    &:active {
      ~ .ecl-rating-field__label {
        .ecl-rating-field__icon-outline {
          display: none;
        }

        .ecl-rating-field__icon-filled {
          display: inline-block;
        }

        &:hover .ecl-rating-field__icon-filled {
          fill: map.get($rating-field, 'checked-hover-color');
        }
      }
    }
  }

  &:not(.ecl-rating-field--disabled) {
    .ecl-rating-field__input
      + .ecl-rating-field__label:hover
      .ecl-rating-field__icon-outline {
      fill: map.get($rating-field, 'hover-stroke-color');
    }

    .ecl-rating-field__input:focus-visible {
      + .ecl-rating-field__label {
        outline: 1px solid map.get($rating-field, 'focus-outline');
        outline-offset: -1px;
        border-radius: 50%;
      }
    }
  }
}

// stylelint-disable-next-line no-descending-specificity
.ecl-rating-field__input {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// stylelint-disable-next-line no-descending-specificity
.ecl-rating-field__label {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  position: relative;
  width: 32px;
}

// stylelint-disable-next-line no-descending-specificity
.ecl-rating-field__icon-filled {
  bottom: 1px;
  display: none;
  fill: map.get($rating-field, 'checked-color');
  position: relative;
}

// stylelint-disable-next-line no-descending-specificity
.ecl-rating-field__icon-outline {
  bottom: 1px;
  fill: map.get($rating-field, 'stroke-color');
  position: relative;
}

@include breakpoints.up('m') {
  .ecl-rating-field {
    .ecl-rating-field__icon-filled,
    .ecl-rating-field__icon-outline {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .ecl-rating-field__label {
    height: 28px;
    width: 28px;
  }
}
