<template>
  <ElRadio v-bind="getBind" v-on="$listeners" class="Radio">
    <slot />
  </ElRadio>
</template>

<script>
export default {
  name: 'Radio',
  computed: {
    getBind() {
      return {
        border: true,
        ...this.$attrs
      }
    }
  }
}
</script>

<style lang='scss' scoped>
label.Radio {
  border-color: rgba(96, 223, 254, .5);
  border-radius: 2px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  padding: 0 6px;
  margin: 0 3px !important;

  &.is-checked {
    border-color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
  }

  ::v-deep {
    .el-radio__input {
      display: none;
    }

    .el-radio__label {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      padding: 0;
    }
  }
}
</style>
