<!--
    #VUE3 Mostly done

    Creates a toggle button (a control with the appearance of a normal button that can be toggle
    between an on/off state).

    <px-radio-button v-model:checked="checked" />
-->

<template>
    <button
        :class="[
            bem({ checked: checkedValue, ...variantsMap }),
            checkedClass && checkedValue ? checkedClass : null,
        ]"
        :aria-checked="checkedValue"
        role="radio"
        v-bind="$attrs"
        @click="toggleChecked"
    >
        <div :class="bem('check', { checked: checkedValue })"></div>
        <slot />
    </button>
</template>

<script>
import PxBaseToggle from '../bases/PxBaseToggle.vue';
import PxBaseVariants from '../bases/PxBaseVariants.vue';

export default {
    name: 'px-radio-button',
    mixins: [PxBaseToggle, PxBaseVariants],
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
@use '@thinkpixellab-public/px-styles/src/modules/controls' as controls;

.px-radio-button {
    @include controls.control-reset();
    background: transparent;

    &--default {
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        &:hover {
            @include bem(check) {
                &::after {
                    opacity: 0.5;
                }
            }
        }
    }

    &--default & {
        &__check {
            width: 1.2em;
            height: 1.2em;
            border-radius: 50%;
            border: 1px solid currentColor;
            margin-right: 0.5em;
            position: relative;
            padding: 0.25em;
            box-sizing: border-box;
            flex: none;
            @include after() {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: accent();
                opacity: 0;
            }

            &--checked {
                &::after {
                    opacity: 1 !important;
                }
            }
        }

        @include bem(check) {
            // width: 1.2em;
            // height: 1.2em;
            // border-radius: 50%;
            // border: 1px solid currentColor;
            // margin-right: 0.5em;
            // position: relative;
            // padding: 0.25em;
            // box-sizing: border-box;
            // flex: none;
            // @include after() {
            //     width: 100%;
            //     height: 100%;
            //     border-radius: 50%;
            //     background-color: accent();
            //     opacity: 0;
            // }
        }
    }
}
</style>
