// Name:            Rating
// Description:     Rating for events, movie and items
//
// Component:       `c-rating`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================

// Variables
// ========================================================================

$rating-color: #ffbe26; // TODO: Add color to colors.map.scss

// ========================================================================

.c-rating {
  --ratig-stroke: var(--rating-stroke, var(--body-secondary-color));
  stroke: var(--ratig-stroke);
      
  &--filled {
    --rating-stroke: #{$rating-color};
    fill: $rating-color;
  }
}

/* --------------------------------- */
/* RATING CSS */
/* --------------------------------- */

.c-rating--input {

  input:checked ~ label .c-rating{
     --rating-stroke: #{$rating-color};
     fill: $rating-color;
   }
}