<template>
    <SfTabs :open-tab="1" class="tab-orphan">
        <SfTab title="My reviews">
            <p class="message">
                This feature is not implemented yet! Please take a look at<br />
                <a href="#"
                    >https://github.com/DivanteLtd/vue-storefront/issues for our
                    Roadmap!</a
                >
            </p>
        </SfTab>
    </SfTabs>
</template>
<script>
    import { SfTabs } from '@borngroup/lightswitch-storefront-ui-vue';

    export default {
        name: 'MyReviews',
        components: { SfTabs },
    };
</script>
<style lang="scss" scoped>
    @import '@borngroup/lightswitch-storefront-ui-vue/styles';
    .tab-orphan {
        @mixin for-mobile {
            --tabs-title-display: none;
            --tabs-content-padding: 0;
            --tabs-conent-border-width: 0;
        }
    }
    .message {
        margin: 0 0 var(--spacer-lg) 0;
    }
    a {
        color: var(--c-primary);
        text-decoration: none;
        font-weight: var(--font-weight--medium);
        &:hover {
            color: var(--c-text);
        }
    }
</style>
