{"version":3,"file":"index-BWHhfPId.js","sources":["../../../packs/frontend/components/Base/Dropdown/Item/index.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"BaseDropdownItem\",\n  inheritAttrs: false,\n};\n</script>\n<script lang=\"ts\" setup>\nimport {\n  BaseButtonKindEnum,\n  BaseButtonSizeEnum,\n} from \"@/components/Base/Button\";\nimport { type BootstrapIconName } from \"@/types/bootstrap-icons\";\nimport { type Props as BaseIconProps } from \"@/components/Base/Icon/index.vue\";\n\nexport type Props = {\n  disabled?: boolean;\n  to?: RouterLinks;\n  href?: string;\n  iconName?: BootstrapIconName;\n  iconColor?: BaseIconProps[\"color\"];\n  iconBgColor?: string;\n  label?: string;\n  value?: string | number;\n};\n\ndefineProps<Props>();\n</script>\n\n<template>\n  <li :class=\"{ disabled }\" class=\"base-dropdown-item\">\n    <IconButton\n      class=\"dropdown-item base-dropdown-item__button\"\n      type=\"button\"\n      :kind=\"BaseButtonKindEnum.LINK\"\n      variant=\"dark\"\n      icon-position=\"left\"\n      :label=\"label\"\n      :value=\"value\"\n      :icon-name=\"iconName\"\n      :icon-color=\"iconColor\"\n      :icon-bg-color=\"iconBgColor\"\n      :disabled=\"disabled\"\n      :to=\"to\"\n      :href=\"href\"\n      :inline=\"true\"\n      :size=\"BaseButtonSizeEnum.SM\"\n      v-bind=\"$attrs\"\n    >\n      <slot></slot>\n    </IconButton>\n  </li>\n</template>\n<style scoped lang=\"scss\">\n.base-dropdown-item {\n  list-style: none;\n\n  &__button {\n    width: 100%;\n    justify-content: start;\n    display: flex;\n    align-items: center;\n    gap: $spacer-2;\n\n    --bs-dropdown-link-hover-bg: var(--hover-color);\n    --bs-dropdown-link-active-bg: var(--hover-color-dark);\n    --bs-dropdown-link-active-color: var(--color-black);\n\n    // due to conflicting styles in btn and dropdown-item we need to nudge the icon down a bit\n    :deep(.bi) {\n      transform: translateY(0.07em);\n    }\n\n    &.text-danger:active {\n      background-color: $color-red;\n      color: $white !important;\n    }\n\n    &__description {\n      font-size: 0.9rem;\n      font-weight: 400;\n      white-space: normal;\n      color: $color-gray-500;\n    }\n\n    &--lg {\n      display: flex;\n      align-items: flex-start;\n      gap: $spacer-2;\n    }\n\n    &--selected {\n      position: relative;\n\n      &::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 2px;\n        background-color: $primary;\n      }\n    }\n  }\n}\n\n.disabled {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["__default__"],"mappings":"kMACA,MAAeA,EAAA,CACb,KAAM,mBACN,aAAc,EAChB"}