{"version":3,"file":"LinkTile-t9AIXUst.js","sources":["../../../packs/frontend/components/LinkTile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { RouterLinkProps } from \"vue-router\";\n\nconst props = defineProps<{\n  title: string;\n  linkName: string;\n  icon: string;\n  link?: string;\n  to?: RouterLinkProps[\"to\"];\n}>();\n\nconst linkComponent = computed(() => {\n  if (props.to) {\n    return \"router-link\";\n  } else {\n    return \"a\";\n  }\n});\n\nconst linkAttrs = computed(() => {\n  if (props.to) {\n    return {\n      to: props.to,\n    };\n  } else {\n    return { href: props.link };\n  }\n});\n</script>\n\n<template>\n  <div class=\"link-tile\">\n    <div class=\"link-tile__text\">\n      <!-- eslint-disable-next-line vue/no-v-html -->\n      <h3 class=\"link-tile__title\" v-html=\"title\"></h3>\n      <component\n        :is=\"linkComponent\"\n        v-bind=\"linkAttrs\"\n        class=\"link-primary link-tile__link\"\n        data-testid=\"link-material\"\n        :title=\"title\"\n      >\n        {{ linkName }}\n        <i class=\"bi bi-arrow-right ms-1\"></i>\n      </component>\n    </div>\n    <div class=\"link-tile__footer\">\n      <i :class=\"`bi bi-${icon} link-tile__icon'`\"></i>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.link-tile {\n  @include media-breakpoint-only(sm) {\n    height: 21rem;\n  }\n\n  position: relative;\n  display: flex;\n  height: 21rem;\n  justify-content: space-between;\n  flex-direction: column;\n  border-radius: $border-radius;\n  padding: $spacer-4;\n  padding-right: 1.25rem;\n  padding-bottom: 1.25rem;\n  color: $brand-tools;\n  background: linear-gradient(138.15deg, #f4f6fb 0%, #e0e4f2 100%);\n  font-weight: $font-weight-semibold;\n  box-shadow: $brand-box-shadow;\n  transition:\n    transform 0.1s ease-out,\n    box-shadow 0.1s ease-out;\n\n  @include media-breakpoint-down(md) {\n    flex-direction: row;\n    height: 13rem;\n  }\n\n  @include media-breakpoint-down(sm) {\n    height: 8rem;\n  }\n\n  &:hover {\n    transform: scale(1.03);\n  }\n\n  &__text {\n    opacity: 0.95;\n    margin-top: 3rem;\n\n    @include media-breakpoint-down(md) {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      margin-top: 0;\n    }\n  }\n\n  &__title {\n    font-size: $h2-font-size;\n\n    @include media-breakpoint-down(sm) {\n      font-size: $font-size-base;\n      max-width: 70%;\n    }\n  }\n\n  &__link {\n    font-size: $font-size-base;\n    height: 2.125rem;\n    text-decoration: none;\n\n    @include media-breakpoint-down(md) {\n      height: fit-content;\n    }\n\n    @include media-breakpoint-down(sm) {\n      font-size: $font-size-xs;\n    }\n\n    &::after {\n      z-index: 2;\n      content: \"\";\n      position: absolute;\n      inset: 0;\n    }\n  }\n\n  &__footer {\n    display: flex;\n    justify-content: flex-end;\n    font-size: 5rem;\n    position: relative;\n\n    & i::before {\n      display: block;\n      opacity: 0.1;\n      position: absolute;\n      bottom: 0;\n      right: 0;\n    }\n\n    @include media-breakpoint-down(md) {\n      align-items: flex-end;\n      font-size: 3.125rem;\n      padding: $spacer-2;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","linkComponent","computed","linkAttrs"],"mappings":"uTAGA,MAAMA,EAAQC,EAQRC,EAAgBC,EAAS,IACzBH,EAAM,GACD,cAEA,GAEV,EAEKI,EAAYD,EAAS,IACrBH,EAAM,GACD,CACL,GAAIA,EAAM,EACZ,EAEO,CAAE,KAAMA,EAAM,IAAK,CAE7B"}