{"version":3,"file":"CeeGJxL0.js","sources":["../../../../src/components/tiles/components/tileFrame/TileFrame.vue"],"sourcesContent":["<template>\n  <div\n    class=\"relative overflow-visible tile-frame rounded-alt-lg\"\n    :class=\"{\n      slim: !isMobile && size === ETileSize.SLIM,\n      normal: isMobile || size === ETileSize.NORMAL,\n      large: !isMobile && size === ETileSize.LARGE,\n      shop: !isMobile && size === ETileSize.SHOP,\n      'shop-single-mobile': size === ETileSize.SHOP_SINGLE_MOBILE,\n      'shop-advanced': !isMobile && size === ETileSize.SHOP_ADVANCED,\n      'shop-mobile': isMobile && size === ETileSize.SHOP,\n      'bg-background-base': !transparent,\n      'campaign-single-mobile': size === ETileSize.CAMPAIGN_SINGLE_MOBILE,\n    }\"\n  >\n    <div\n      class=\"flex flex-col w-full h-full cursor-pointer wrapper\"\n      @click=\"$emit('click')\"\n    >\n      <div v-if=\"$slots.image\" class=\"relative flex-shrink-0 imagery\">\n        <slot name=\"image\" />\n      </div>\n\n      <div class=\"h-full content\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\"></script>\n<script setup lang=\"ts\">\nimport { ETileSize } from '~~/src/@types/tile-size';\nimport { mq_breakpointIsMobile } from '~~/src/injectionSymbols';\n\ndefineProps({\n  size: {\n    type: String as PropType<ETileSize>,\n    required: false,\n    default: ETileSize.NORMAL,\n  },\n  transparent: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\ndefineEmits<{\n  (e: 'click'): void;\n}>();\n\nconst isMobile = inject(mq_breakpointIsMobile);\n</script>\n<style scoped lang=\"postcss\">\n.wrapper {\n  @apply h-full w-full flex flex-col cursor-pointer;\n}\n.slim {\n  @apply col-span-12 min-h-[288px] flex;\n\n  .wrapper {\n    @apply min-h-[288px] flex flex-row;\n    .imagery {\n      @apply w-tile-slim-imagery;\n    }\n    .content {\n      @apply w-2/3;\n    }\n  }\n}\n\n.normal {\n  @apply col-span-12 md:col-span-6 touch:md:col-span-4 lg:col-span-4 min-h-128 cursor-pointer;\n\n  .wrapper {\n    .imagery {\n      @apply h-[256px];\n    }\n  }\n}\n\n.shop {\n  @apply col-span-6 [@media(min-width:1024px)]:col-span-6 xl:!col-span-3 min-h-fit md:min-h-[576px] cursor-pointer max-w-[330px] 2xl:w-[330px];\n\n  .wrapper {\n    .imagery {\n      @apply h-[256px];\n    }\n  }\n}\n\n.shop-single-mobile {\n  @apply md:w-[330px] [@media(min-width:1024px)]:col-span-4 xl:!col-span-3 min-h-fit md:min-h-[576px] cursor-pointer;\n}\n\n.campaign-single-mobile {\n  @apply !col-span-12 lg:!col-span-6 2xl:w-[330px] xl:!col-span-3 min-h-fit md:min-h-[576px] cursor-pointer;\n}\n\n.shop-mobile {\n  @apply !col-span-6 !min-h-fit;\n}\n\n.large {\n  @apply col-span-12 min-h-[384px] flex;\n\n  .wrapper {\n    @apply h-[384px] flex;\n    .imagery {\n      @apply w-tile-large-imagery;\n    }\n    .content {\n      @apply w-1/3;\n    }\n  }\n}\n</style>\n"],"names":["isMobile","inject","mq_breakpointIsMobile"],"mappings":"yYAmDM,MAAAA,EAAWC,EAAOC,CAAqB"}