@import 'variables';

@mixin starability-base() {
  display: block;
  position: relative;
  width: $star-count * $star-size;
  min-height: 2 * $star-size;
  padding: 0;
  border: none;

  > input {
    position: absolute;
    margin-right: -100%;
    opacity: 0;
  }

  > input:checked ~ label,
  > input:focus ~ label {
    background-position: 0 0;
  }

  > input:checked + label,
  > input:focus + label {
    background-position: 0 (-$star-size);
  }

  > input[disabled]:hover + label {
    cursor: default;
  }

  @if ($hover-enabled) {
    > input:not([disabled]):hover ~ label {
      background-position: 0 0;
    }

    > input:not([disabled]):hover + label {
      background-position: 0 (-$star-size);
    }

    > input:not([disabled]):hover + label::before {
      opacity: 1;
    }
  }

  @if ($accessible-highlight) {
    > input:focus + label {
      outline: 1px dotted #999;
    }
  }

  @if ($accessible-focus-ring) {
    .starability-focus-ring {
      position: absolute;
      left: 0;
      width: 100%;
      height: $star-size;
      outline: 2px dotted #999;
      pointer-events: none;
      opacity: 0;
    }

    > .input-no-rate:focus ~ .starability-focus-ring {
      opacity: 1;
    }
  }

  > label {
    position: relative;
    display: inline-block;
    float: left;
    width: $star-size;
    height: $star-size;
    font-size: 0.1em;
    color: transparent;
    cursor: pointer;
    background-image: $img-stars-sprite;
    background-repeat: no-repeat;
    background-position: 0 (-$star-size);

    &::before {
      content: '';
      position: absolute;
      display: block;
      height: $star-size;
      background-image: $img-stars-sprite;
      background-position: 0 $star-size;
      pointer-events: none;
      opacity: 0;
    }

    @if ($hover-enabled) {

      // This function makes sure the right number of stars is highlighted
      $star-count-highlight: $star-count;

      @while $star-count-highlight > 0 {
        $star-number: $star-count-highlight;

        &:nth-of-type(#{$star-number})::before {
          width: $star-number * $star-size - $star-size;
          left: -($star-number * $star-size - $star-size);
        }

        $star-count-highlight: $star-count-highlight - 1;
      }
    }

    @media screen and (min-resolution: 192dpi) {
      background-image: $img-stars-sprite-2x;
      background-size: $star-size auto;
    }
  }

  @if ($high-contrast-enabled) {

    // To make the rating widget accessible in high contrast, we remove the styling.
    @media screen and (-ms-high-contrast: active) {
      width: auto;

      > input {
        position: static;
        margin-right: 0;
        opacity: 1;
      }

      .input-no-rate {
        display: none;
      }

      > label {
        display: inline;
        float: none;
        width: auto;
        height: auto;
        font-size: 1em;
        color: inherit;
        background: none;

        &::before,
        &::after {
          display: none;
        }
      }
    }
  }
}

@mixin starability-animation-base($img-animated: $img-stars-sprite, $img-animated-2x: $img-stars-sprite-2x) {
  content: ' ';
  position: absolute;
  opacity: 0;
  width: $star-size;
  height:  $star-size;
  background-image: $img-animated;
  background-repeat: no-repeat;

  @media screen and (min-resolution: 192dpi) {
    background-image: $img-animated-2x;
    background-size: $star-size auto;
  }
}