<script setup lang="ts">
    import { app } from '../config'
</script>

<template>
    <div class="footer">
        <div class="company">{{ app.copyright.company }}</div>
        <div class="copyright">
            <span>Copyright © {{ app.copyright.year }}</span>
            <span class="link">
                <a target="_blank" :href="app.copyright.link">{{ app.copyright.text }}</a>
            </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .footer {
        width: calc(100% - 40px);
        height: 52px;
        position: fixed;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        color: #b5b5b5;
        font-size: 13px;
        user-select: none;

        .company {
            letter-spacing: 2px;
        }

        .link {
            margin-left: 5px;

            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            a {
                color: #b5b5b5;
                margin-left: 3px;
            }
        }
    }
</style>
