:root {
    --border-radius: 10px;
    
    --heat-mode-off-color: #9e9e9e;
    --heat-mode-min-color:#FF9D00;
    --heat-mode-med-color:#FF6C00;
    --heat-mode-max-color: #FF0800;
    
    --heat-mode-off-background-color: #c4c4c4;
    --heat-mode-min-background-color: rgb(255, 201, 128);
    --heat-mode-med-background-color: #FFA060;
    --heat-mode-max-background-color: rgb(255, 104, 96);
}

.heat-modes {
  display: flex;
  /*max-width: 448px;*/
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  
  margin: 0 auto;
  font-size: 18px;
  border: 1px solid #fff;
  border-radius: var(--border-radius);
  color: #fff; 
}
.heat-modes > input {
    display: none;
}
.heat-modes > input:checked + label {
  color: #000;
}

/* COLORI SFONDO DELL ELEMENTO SELEZIONATO */
.heat-modes > input:nth-of-type(1):checked + label{
  background-color: var(--heat-mode-off-color);
  border-radius: var(--border-radius);
}
.heat-modes > input:nth-of-type(2):checked + label {
  background-color: var(--heat-mode-min-color);
  border-radius: var(--border-radius);
}
.heat-modes > input:nth-of-type(3):checked + label {
  background-color: var(--heat-mode-med-color);
  border-radius: var(--border-radius);
}
.heat-modes > input:nth-of-type(4):checked + label {
  background-color: var(--heat-mode-max-color);
  border-radius: var(--border-radius);
}

/* COLORI DEGLI ALTRI ELEMENTI QUANDO UNO E SELEZIONATO */
.heat-modes:has(> input:nth-of-type(1):checked) {
  background-color: var(--heat-mode-off-background-color);
  border-color: var(--heat-mode-off-color);
}
.heat-modes:has(> input:nth-of-type(2):checked) {
  background-color: var(--heat-mode-min-background-color);
  border-color: var(--heat-mode-min-color);
}
.heat-modes:has(> input:nth-of-type(3):checked) {
  background-color: var(--heat-mode-med-background-color);
  border-color: var(--heat-mode-med-color);
}
.heat-modes:has(> input:nth-of-type(4):checked) {
  background-color: var(--heat-mode-max-background-color);
  border-color: var(--heat-mode-max-color);
}

/* BORDO A TUTTI I LABEL TRANNE L'ULTIMO */
.heat-modes label:not(:last-child) {
  /*border-right: 1px solid #fff;*/
}


.heat-modes label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.heat-modes label:last-of-type:before {
  content: "";
  display: block;
  max-width: calc(25% - 0px);
  margin: 0px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: translateX(0);
}
.heat-modes label {
  padding: 6px 3px;
  transition: color 1000ms cubic-bezier(0, 0.95, 0.38, 0.98);
}