/*
=====
DEPENDENCES
=====
*/

.screen-reader{
    width: var(--screenReaderWidth, 1px) !important;
    height: var(--screenReaderHeight, 1px) !important;
    padding: var(--screenReaderPadding, 0) !important;
    border: var(--screenReaderBorder, none) !important;
  
    position: var(--screenReaderPosition, absolute) !important;
    clip: var(--screenReaderClip, rect(1px, 1px, 1px, 1px)) !important;
    overflow: var(--screenReaderOverflow, hidden) !important;
  }
  
  /*
  =====
  CORE STYLES
  =====
  */
  
  .rating{
    --uiRatingColor: var(--ratingColor, #eee);
    --uiRatingColorActive: var(--ratingColorActive, #ffcc00);
  
    display: var(--ratingDisplay, flex);
    font-size: var(--ratingSize, 1rem);
    color: var(--uiRatingColor);
  }
      
  .rating__control:nth-of-type(1):focus ~ .rating__item:nth-of-type(1)::before,
  .rating__control:nth-of-type(2):focus ~ .rating__item:nth-of-type(2)::before,
  .rating__control:nth-of-type(3):focus ~ .rating__item:nth-of-type(3)::before,
  .rating__control:nth-of-type(4):focus ~ .rating__item:nth-of-type(4)::before,
  .rating__control:nth-of-type(5):focus ~ .rating__item:nth-of-type(5)::before{
    content: ""; 
    box-shadow: 0 0 0 var(--ratingOutlineWidth, 4px) var(--uiRatingColorActive);
  
    position: absolute;
    top: -.15em;
    right: 0;
    bottom: -.15em;
    left: 0;
    z-index: -1;
  }
  
  .rating__item{
    cursor: pointer;  
    position: relative;
  }
  
  .rating__item{
    padding-left: .25em;
    padding-right: .25em;
  }
  
  .rating__star{
    display: block;
    width: 1em;
    height: 1em;
  
    fill: currentColor;
    stroke: var(--ratingStroke, #222);
    stroke-width: var(--ratingStrokeWidth, 1px);
  }
  
  .rating:hover,
  .rating__control:nth-of-type(1):checked ~ .rating__item:nth-of-type(1),
  .rating__control:nth-of-type(2):checked ~ .rating__item:nth-of-type(-n+2),
  .rating__control:nth-of-type(3):checked ~ .rating__item:nth-of-type(-n+3),
  .rating__control:nth-of-type(4):checked ~ .rating__item:nth-of-type(-n+4),
  .rating__control:nth-of-type(5):checked ~ .rating__item:nth-of-type(-n+5){
    color: var(--uiRatingColorActive);
  }
  
  .rating__item:hover ~ .rating__item{
    color: var(--uiRatingColor);
  }
  
  /*
  =====
  SETTINGS
  =====
  */
  
  .rating{
    --ratingSize: 2rem;
    --ratingColor: #eee;
    --ratingColorActive: #ffcc00;
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  body{
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    font-size: 1rem;
    margin: 0;
  }
  
  .page{
    min-height: 100vh;
    display: flex;
  }
  
  .page__demo{
    margin: auto;  
  }
  
  .page__group{
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .page__hint{
    display: block;
    font-weight: 700;
    margin-top: 1rem;
  }
  
  @media (min-width: 641px){
    .page__demo{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .page__group{
      margin-left: 3.5rem;
      margin-right: 3.5rem;
    }
  }