'one | two | 50%'
<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <PxFlip ref="flip" :states="['one', 'two']" :current="currentState">
            <template #default="{ state }">
                {{ state }}
                <br />
                <br />
                <div :class="bem('container', { state })">
                    <div :class="bem('red')" data-flip />
                    <div :class="bem('gold')" data-flip />
                    <div :class="bem('blue')" data-flip />
                </div>
            </template>
        </PxFlip>
        <button @click="toggleState">Toggle</button>
    </div>
</template>

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

export default {
    name: 'demo-px-flip',
    components: { PxFlip },

    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return {
            currentState: 'one',
        };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    methods: {
        toggleState() {
            if (this.currentState == 'one') {
                this.currentState = 'two';
            } else {
                this.currentState = 'one';
            }
        },
    },
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;
.demo-px-flip {
    padding: 5em;
    &__container {
        width: 200px;
        height: 200px;
        border: 1px solid black;

        // prettier-ignore
        @include grid-art(
            (
                '50%  | 50%  | ',
                'red  | gold | 50%',
                'blue | blue | 50%'
            )
        );

        span {
            width: 100%;
            height: 0.5em;
            background-color: currentColor;
        }

        &--state-one {
        }

        &--state-two {
            // prettier-ignore
            @include grid-art(
                (
                    '33%  | 67%  | ',
                    'blue | red  | 50%',
                    'gold | gold | 50%'
                )
            );
        }
    }

    &__red {
        background-color: tomato;
        grid-area: red;
    }
    &__gold {
        background-color: gold;
        grid-area: gold;
    }
    &__blue {
        background-color: lightblue;
        grid-area: blue;
    }
}
</style>