<script setup>
import { ModalsContainer } from 'vue-final-modal'
import { useHead } from '@vueuse/head'

useHead({
  link: [
    {
      href: 'https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone',
      rel: 'stylesheet',
    },
  ],
})
</script>

<template>
  <slot />

  <ModalsContainer />
</template>

<style>
:root {
  --c-primary: mediumslateblue;
  --c-primary-rgb: 100, 108, 255;
  --c-positive: #646cff;
  --c-negative: #ffaa3e;
  --c-warning: #ff6d6d;
  --c-text-color: #ffffff;
  --c-bg-input-calendar-dark: #707070;

  --c-bg-dark: #2c2b2e;
  /* --c-primary-rgb: #ff0000; */
  --c-secondary: #00bbc9;
  /* --c-modal-black-rgb: 0, 0, 0; */
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-family-base);
  color: var(--c-text);
  margin: 0px;
  padding: 0px;
}
</style>
