{"version":3,"file":"UnsupportedBrowserModal--uHFI2KT.js","sources":["../../Vue/src/components/Modals/UnsupportedBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst modals = useModalStore();\r\n</script>\r\n\r\n<template>\r\n  <Modal\r\n    id=\"UnsupportedBrowserModal\"\r\n    :title=\"$t('SV.LIT_ImproveYourExperience')\"\r\n  >\r\n    <p>\r\n      {{ $t(\"SV.MES_UnsupportedBrowser\") }}\r\n    </p>\r\n    <div class=\"browser-items\">\r\n      <a\r\n        class=\"browser-item\"\r\n        href=\"https://www.google.com/chrome\"\r\n        target=\"_blank\"\r\n      >\r\n        <img\r\n          src=\"https://cdn.ccli.com/songselect/vue/browsers/chrome.svg\"\r\n          alt=\"Google Chrome Logo\"\r\n          class=\"logo\"\r\n        />\r\n        <div>{{ $t(\"SV.LIT_GoogleChrome\") }}</div>\r\n      </a>\r\n      <a\r\n        class=\"browser-item\"\r\n        href=\"https://www.microsoft.com/edge\"\r\n        target=\"_blank\"\r\n      >\r\n        <img\r\n          src=\"https://cdn.ccli.com/songselect/vue/browsers/edge.svg\"\r\n          alt=\"Microsoft Edge Logo\"\r\n          class=\"logo\"\r\n        />\r\n        <div>{{ $t(\"SV.LIT_MicrosoftEdge\") }}</div>\r\n      </a>\r\n      <div class=\"mobile-break\" />\r\n      <a\r\n        class=\"browser-item\"\r\n        href=\"https://www.apple.com/safari/\"\r\n        target=\"_blank\"\r\n      >\r\n        <img\r\n          src=\"https://cdn.ccli.com/songselect/vue/browsers/safari.svg\"\r\n          alt=\"Apple Safari Logo\"\r\n          class=\"logo\"\r\n        />\r\n        <div>{{ $t(\"SV.LIT_AppleSafari\") }}</div>\r\n      </a>\r\n      <a\r\n        class=\"browser-item\"\r\n        href=\"https://www.mozilla.org/en-US/firefox\"\r\n        target=\"_blank\"\r\n      >\r\n        <img\r\n          src=\"https://cdn.ccli.com/songselect/vue/browsers/firefox.svg\"\r\n          alt=\"Mozilla Firefox Logo\"\r\n          class=\"logo\"\r\n        />\r\n        <div>{{ $t(\"SV.LIT_MozillaFirefox\") }}</div>\r\n      </a>\r\n    </div>\r\n    <hr />\r\n\r\n    <p>\r\n      {{ $t(\"SV.MES_ContinueWithBrowser\") }}\r\n    </p>\r\n\r\n    <template #footer>\r\n      <Button\r\n        variant=\"orange\"\r\n        @click.stop.prevent=\"modals.hideModal()\"\r\n        >{{ $t(\"SV.LIT_IUnderstand\") }}</Button\r\n      >\r\n    </template>\r\n  </Modal>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.browser-items {\r\n  @apply my-3 flex flex-wrap items-end justify-between gap-2;\r\n}\r\n.browser-item {\r\n  @apply text-center;\r\n\r\n  .logo {\r\n    @apply mx-auto h-16 w-16;\r\n  }\r\n}\r\nhr {\r\n  @apply my-5;\r\n}\r\n.mobile-break {\r\n  @apply w-full md:hidden;\r\n}\r\n</style>\r\n"],"names":["modals","useModalStore"],"mappings":"qtBACA,MAAMA,EAASC"}