Caramel-CRM/resources/js/components/DialogCloseButton/DialogCloseButton.vue

<script setup lang="ts">
import { Button } from '@/components/ui/crm-button'
import { X } from "lucide-vue-next"

</script>

<template>
    <Button size="sm">
        <X  />
    </Button>
</template>

<style scoped>
/* Win: top right, ghost */
button {
    position: absolute;
    top: 0;
    right: 0;
    height: 2rem;
    width: 2rem;
    border: none;
    background-color: transparent;
    color: var(--color-muted-foreground);
    transition-property: background-color;
    box-shadow: none;
}

button:hover {
    background-color: var(--color-gray-200) !important;
}

button:active {
    background-color: var(--color-neutral-300) !important;
}

.dark {
    button:hover {
        background-color: var(--color-neutral-900) !important;
    }

    button:active {
        background-color: var(--color-neutral-950) !important;
    }
}

/* Mac: top left, round bordered */
.is-mac {
    button {
        top: -0.75rem;
        left: -0.75rem;
        width: 1.5rem;
        height: unset;
        aspect-ratio: 1/1 !important;
        border-radius: 100%;
        border: 1px solid var(--color-border);
        background-color: var(--color-muted);
        box-shadow: var(--shadow-md);

        svg {
            width: var(--text-sm);
            stroke-width: 2px;
        }
    }

}

.dark .is-mac {
    button {
        background-color: var(--color-neutral-800);
    }
}

/* Linux: inline, round borderless */
.is-linux {
    button {
        position: unset;
        background-color: var(--color-neutral-700);
        border-radius: 100%;
        height: 1.563rem;
        width: 1.563rem;
    }
}
</style>