.m-radio {
  position: relative;

  .m-radio-input {
    appearance: none;

    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-image: url('./assets/border.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    vertical-align: middle;

    &:checked {
      background-image: url('./assets/radio-checked.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 20px;
    }
  }


  .m-radio-label {
    margin-right: 20px;
    vertical-align: middle;
  }
}

html[dark] {

  .m-radio-input {
    filter: invert(1);
  }

}