﻿
/*.ratingBox {
  display: inline-flex;
  flex-direction: column; 
  align-items: center;    
    position: absolute;
    right: 20px;
    border: 1px var(--blueSteel) solid;
    padding: 10px;
    border-radius: 20px;
}*/

.disDiv{
	pointer-events: none	
}


.ratingBox {
  display: inline-flex;
  flex-direction: column; /* zvezdice zgoraj, besedilo spodaj */
  align-items: center;    /* poravnaj na sredino */
    position: absolute;
    right: 20px;
    border: 1px var(--blueSteel) solid;
    padding: 10px;
    border-radius: 20px;
}

.rating {
	display: flex;          /* pusti zvezdice v eni vrstici */
	flex-direction: row-reverse;
}

.ratingText {
  margin-top: 6px;
  font-size: 10px;
  color: var(--textLo);
  text-align: center;
}

.rating input {
  display: none; /* skrij radio gumbe */
}

.rating label {
  width: 15px;
  height: 15px;
  background: url('/../../../slike/zvezdicaOff.svg') no-repeat center;
  background-size: contain;
  cursor: pointer;
  filter: drop-shadow(0 0 1px #000);
}

/* prižgi ob hoverju */
.rating label:hover,
.rating label:hover ~ label {
  background-image: url('/slike/zvezdicaOn.svg');
  transform: scale(1.2);
  filter: drop-shadow(0 0 -1px #ffcc00) drop-shadow(0 0 -3px #ff9900);
  animation: pulseStar 1.5s infinite alternate;
}

/* ob izbiri (klik) ostanejo prižgane */
.rating input:checked ~ label {
  background-image: url('/slike/zvezdicaOn.svg');
  filter: drop-shadow(0 0 -2px #ffcc00) drop-shadow(0 0 -4px #ff9900);
  animation: pulseStar 2s infinite alternate;
}

.rating input[myGrade] + label {
  background-image: url('/../../../slike/zvezdicaOn.svg');
  filter: drop-shadow(0 0 1px #FF3300) drop-shadow(0 0 4px #FF3300);
  animation: pulseRed 0.5s infinite alternate;
}


/* animacija "diha" */
@keyframes pulseStar {
  0% {
    filter: drop-shadow(0 0 0px #ffcc00) drop-shadow(0 0 0px #ff9900);
    transform: scale(1.15);
  }
  100% {
    filter: drop-shadow(0 0 0px #ffee66) drop-shadow(0 0 2px #ffcc00);
    transform: scale(1.25);
  }
}

@keyframes pulseRed {
  0% {
    filter: drop-shadow(0 0 0px #FF3300) drop-shadow(0 0 0px #FF3300);
    transform: scale(1.25);
  }
  100% {
    filter: drop-shadow(0 0 0px #FF3300) drop-shadow(0 0 2px #FF3300);
    transform: scale(1.35);
  }
}
