<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <div :class="bem('outer')" @click="evenOdd++">
            <px-slide-transition>
                <div v-if="evenOdd % 2" :class="bem('inner', { even: true })" />
            </px-slide-transition>
            <px-slide-transition>
                <div v-if="!(evenOdd % 2)" :class="bem('inner', { odd: true })">
                    <div :class="bem('inner-inner')" data-slide>SO INNER</div>
                </div>
            </px-slide-transition>
        </div>
    </div>
</template>

<script>
import PxSlideTransition from '../../components/PxSlideTransition.vue';

export default {
    name: 'demo-px-slide-transition',
    components: { PxSlideTransition },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { evenOdd: 0 };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;

.demo-px-slide-transition {
    &__outer {
        width: 300px;
        height: 300px;
        background-color: hotpink;
        border-radius: 50%;
        position: relative;
        margin: 20px auto;
        padding: 30px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100%;
        grid-area: content;
    }

    &__inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: gold;
        display: flex;
        align-items: center;
        justify-content: center;

        grid-area: 1/1/1/1;
        &--even {
            background-color: purple;
        }
    }

    &__inner-inner {
        width: 80%;
        height: 80%;
        background-color: orange;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        font-weight: bold;
        color: white;
        border-radius: 50%;
    }
}
</style>
