.radio,
.checkbox {
  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;

    + label {
      &::before {
        @extend %material-icons;
        width: 24px;
        height: 24px;
        margin-right: 10px;
        align-content: center;
      }
    }

    &:disabled {
      + label {
        &::before {
          color: color('_others', 'disabled');
        }
      }
    }
  }
}

.radio input {
  + label {
    &::before {
      content: 'radio_button_unchecked';
    }
  }

  &:checked {
    + label {
      &::before {
        content: 'radio_button_checked';
      }
    }
  }
}

.checkbox input {
  + label {
    &::before {
      content: 'check_box_outline_blank';
    }
  }

  &:checked {
    + label {
      &::before {
        content: 'check_box';
      }
    }
  }
}