<template>
  <div class="icon radio-icon">
    <SpIcon v-if="props.active" name="sp-checkbox-checked" />
    <SpIcon v-else name="sp-checkbox-unchecked" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    return {
      props,
    };
  },
});
</script>
<style scoped lang="scss">
.radio-icon {
  --transition-time: 0s;
  --active-color: var(--blue);
  position: relative;

  svg {
    &:not(.unchecked) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity var(--transition-time) ease;

      &.active {
        opacity: 1;
      }

      path {
        fill: var(--active-color);
      }
    }
  }
}
</style>
