@import '@/sass/style.scss';

.StarRating {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  .star-button,
  .star-button--filled {
    display: block;
    height: auto;
    position: relative;
    width: 40px;

    svg {
      display: block;
      height: auto;
      margin: 0 auto;
      width: 100%;

      &:nth-of-type(1) {
        left: 0;
        position: absolute;
        top: 0;
        transition:
          fill 200ms,
          opacity 200ms;
      }

      &:nth-of-type(2) {
        fill: $grayish-yellow;
      }
    }
  }

  .star-button {
    svg {
      &:nth-of-type(1) {
        fill: transparent;
        opacity: 0;
      }
    }
  }

  .star-button--filled {
    svg {
      fill: $grayish-yellow;
      opacity: 1;
    }
  }
}
