{"version":3,"file":"UiButton.648f9ee1.js","sources":["../../../../components/global/ui/UiButton.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    v-bind=\"$attrs\"\n    :class=\"[\n      'ui-button',\n      extraClasses,\n      {\n        'is-loading': loading,\n        'is-full': expanded,\n        'is-hover-disabled': hoverDisabled,\n        'has-no-border': noBorder,\n      },\n    ]\"\n  >\n    <span v-if=\"label\" :class=\"`ui-button__label`\">\n      {{ label }}\n    </span>\n    <span v-else-if=\"$slots.default\" :class=\"`ui-button__label`\">\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs, type PropType, toRefs } from 'vue';\nimport AppLink from '~/components/global/elements/AppLink';\n\ntype ButtonNativeType = 'button' | 'submit' | 'reset';\ntype ButtonTag = 'a' | 'button' | 'input' | 'app-link';\n\nconst props = defineProps({\n  nativeType: {\n    type: String as PropType<ButtonNativeType>,\n    default: 'button',\n  },\n  tag: {\n    type: String as PropType<ButtonTag>,\n    default: 'button',\n  },\n  label: {\n    type: String,\n    default: null,\n  },\n  loading: Boolean,\n  modifier: {\n    type: [String, Array],\n    default: '',\n  },\n  expanded: Boolean,\n  noBorder: Boolean,\n  hoverDisabled: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst { tag } = toRefs(props);\nconst attrs = useAttrs();\n\nconst computedTag = computed(() => {\n  if (attrs.disabled !== undefined && attrs.disabled !== false) {\n    return 'button';\n  }\n  if (tag.value === 'app-link') {\n    return AppLink;\n  }\n  return tag.value;\n});\n\nconst extraClasses = computed(() => {\n  if (!props.modifier) {\n    return null;\n  }\n  return (Array.isArray(props.modifier) ? props.modifier : [props.modifier]).map((mod) => `is-${mod}`);\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@/assets/mixins/__index' as mix;\n\n.ui-button {\n  @include mix.unselectable;\n  padding: 0 calc-clamp(320, $desktop, 30, 45);\n  height: calc-clamp(320, $desktop, 45, 50);\n  @include fluid(font-size, 16, 17, 18);\n  position: relative;\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-align: center;\n  text-transform: capitalize;\n  white-space: nowrap;\n  color: var(--secondary);\n  font-weight: 500;\n  font-family: var(--body-font-family);\n  border: #{rem(3)} solid var(--primary);\n  border-radius: rem(99);\n  background-color: var(--primary);\n  @include transition;\n\n  &:hover {\n    background-color: transparent;\n    border-color: var(--primary);\n    color: var(--primary);\n  }\n\n  &.is-no-hover {\n    &:hover {\n      background-color: var(--primary);\n      color: var(--secondary);\n    }\n  }\n\n  &.is-outlined {\n    background-color: transparent;\n    border-color: var(--primary);\n    color: var(--primary);\n    &:hover {\n      background-color: var(--primary);\n      color: var(--secondary);\n      border-collapse: var(--primary);\n    }\n  }\n\n  &__label {\n    flex: 1;\n    display: grid;\n    grid-auto-flow: column;\n    align-items: center;\n    place-items: center;\n    place-content: center;\n    gap: rem(15);\n\n    svg {\n      width: rem(40);\n    }\n  }\n\n  &.is-loading {\n    pointer-events: none;\n    cursor: wait;\n  }\n\n  &.is-full {\n    display: flex;\n    width: 100%;\n  }\n\n  &.is-narrow {\n    padding: 0 calc-clamp(320, $desktop, 20, 30);\n  }\n\n  &.is-small {\n    padding: 0 calc-clamp(320, $desktop, 20, 30);\n    height: calc-clamp(320, $desktop, 35, 45);\n    @include fluid(font-size, 15, 16, 17);\n  }\n\n  &.is-wide {\n    padding: 0 calc-clamp(320, $desktop, 45, 60);\n    &.is-small {\n      padding: 0 calc-clamp(320, $desktop, 30, 40);\n    }\n  }\n\n  .has-primary-bg & {\n    background-color: var(--secondary);\n    border-color: var(--secondary);\n    color: var(--primary);\n\n    @include hover {\n      background-color: transparent;\n      color: var(--secondary);\n      border-color: var(--secondary);\n    }\n  }\n\n  &.is-white {\n    background-color: var(--white);\n    border-color: var(--white);\n    color: var(--primary);\n\n    @include hover {\n      background-color: transparent;\n      color: var(--white);\n      border-color: var(--white);\n    }\n  }\n\n  &.is-secondary {\n    background-color: var(--darker-pink);\n    border-color: var(--darker-pink);\n    color: var(--white);\n\n    @include hover {\n      background-color: transparent;\n      color: var(--darker-pink);\n      border-color: var(--darker-pink);\n    }\n  }\n\n  &:active,\n  &.is-active {\n    background-color: transparent;\n    color: var(--primary);\n  }\n\n  &.is-light {\n    background: var(--secondary);\n    color: var(--primary);\n    border-color: var(--primary);\n\n    &:hover {\n      background-color: var(--primary);\n      border-color: var(--secondary);\n      color: var(--secondary);\n    }\n  }\n\n  &[disabled],\n  &.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n    background-color: var(--black);\n    border-color: var(--black);\n    color: var(--white);\n  }\n\n  &.has-no-border {\n    border: 0;\n  }\n}\n</style>\n"],"names":["__default__","tag","toRefs","props","attrs","useAttrs","computedTag","computed","AppLink","extraClasses","mod"],"mappings":"iTAyBAA,EAAe,CACb,aAAc,EAChB,2SAoCM,CAAE,IAAAC,CAAA,EAAQC,EAAOC,CAAK,EACtBC,EAAQC,IAERC,EAAcC,EAAS,IACvBH,EAAM,WAAa,QAAaA,EAAM,WAAa,GAC9C,SAELH,EAAI,QAAU,WACTO,EAEFP,EAAI,KACZ,EAEKQ,EAAeF,EAAS,IACvBJ,EAAM,UAGH,MAAM,QAAQA,EAAM,QAAQ,EAAIA,EAAM,SAAW,CAACA,EAAM,QAAQ,GAAG,IAAKO,GAAQ,MAAMA,GAAK,EAF1F,IAGV"}