%fillLeft{
  .fill-left{
    display:flex;
    align-self:center;
    box-sizing:border-box;
  }
  .fill-left__radio{
    appearance:none;
    -webkit-appearance:none;
    background-color:var(--selectedColor);
    width:var(--fillLeftRadioWidth);
    height:var(--fillLeftRadioHeight);
    cursor:pointer;
    &[data-value]{
      display:grid;
      grid-template-areas: 'content';
      place-items:center;
      > *{
        grid-area:content;
      }
      &:checked:before{
        content:attr(data-value);
        color:var(--backColor);
        font-size:1rem;
        place-self:center;
        text-transform: uppercase;
      }
    }
    &:checked ~ .fill-left__radio{
      background-color:var(--unselectedColor2);
    }
  }
}