<template>
    <div id="settingsPanel" :class="{ mobile: screenWidth < 1350, desk: screenWidth >= 1350 }">
        <LanguageBox />
        <!--<AccessabilityBox />-->
    </div>
</template>

<script setup>
import { useMainStore } from '@/stores/main'
const mainStore = useMainStore()
const screenWidth = computed(() => mainStore.screenWidth)
</script>

<style lang="sass">
#settingsPanel
  position: absolute
  top: 25vh
  right: 0
  display: flex
  flex-direction: column
  align-items: flex-end
  gap: 0
  width: auto
  height: auto
  z-index: 12
  &.mobile  
    top: 45vh


</style>