<template>
    <div class="authorization-needed">
        <div class="authorization-needed__container">
            <FontAwesomeIcon class="authorization-needed__icon" icon="user-lock" />
            <div class="authorization-needed__title">Необходима авторизация</div>
            <div class="authorization-needed__text">
                Для просмотра этой страницы
                <br />
                вам необходимо
                <RouterLink to="/login" class="authorization-needed__link">войти</RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style lang="scss">
.authorization-needed {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: r(20);

    &__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: r(15);
    }

    &__icon {
        color: color("theme-color");
        font-size: r(35);
    }

    &__title {
        font-weight: 700;
    }

    &__text {
        text-align: center;
        font-size: r(18);
        line-height: r(26);
    }

    &__link {
        color: color("theme-color");
        cursor: pointer;
    }
}
</style>
