@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 224 71.4% 4.1%;
        --card: 0 0% 100%;
        --card-foreground: 224 71.4% 4.1%;
        --popover: 0 0% 100%;
        --popover-foreground: 224 71.4% 4.1%;
        --primary: 262.1 83.3% 57.8%;
        --primary-foreground: 210 20% 98%;
        --secondary: 220 14.3% 95.9%;
        --secondary-foreground: 220.9 39.3% 11%;
        --muted: 220 14.3% 95.9%;
        --muted-foreground: 220 8.9% 46.1%;
        --accent: 220 14.3% 95.9%;
        --accent-foreground: 220.9 39.3% 11%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 20% 98%;
        --border: 220 13% 91%;
        --input: 220 13% 91%;
        --ring: 262.1 83.3% 57.8%;
        --radius: 0.75rem;
    }

    .dark {
        --background: 224 71.4% 4.1%;
        --foreground: 210 20% 98%;
        --card: 224 71.4% 4.1%;
        --card-foreground: 210 20% 98%;
        --popover: 224 71.4% 4.1%;
        --popover-foreground: 210 20% 98%;
        --primary: 263.4 70% 50.4%;
        --primary-foreground: 210 20% 98%;
        --secondary: 215 27.9% 16.9%;
        --secondary-foreground: 210 20% 98%;
        --muted: 215 27.9% 16.9%;
        --muted-foreground: 217.9 10.6% 64.9%;
        --accent: 215 27.9% 16.9%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;
        --border: 215 27.9% 16.9%;
        --input: 215 27.9% 16.9%;
        --ring: 263.4 70% 50.4%;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

/* customize the scrollbar */

::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.45rem;
}

::-webkit-scrollbar-track {
    @apply bg-background/10;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary;
}

/* !! DRIVER.JS CUSTOMIZATION !! */

/* Class assigned to popover wrapper */
.driver-popover {
    @apply bg-background text-foreground rounded-xl !important;
    border: 0.15rem solid hsl(var(--primary)) !important;
}

/* Arrow pointing towards the highlighted element */
.driver-popover-arrow {
    /* border-color: hsl(var(--primary)) !important; */
    border: 8px solid hsl(var(--primary)) !important;
}

.driver-popover-arrow-side-bottom {
    bottom: 100% !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}

.driver-popover-arrow-side-top {
    top: 100% !important;
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}

.driver-popover-arrow-side-left {
    left: 100% !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.driver-popover-arrow-side-right {
    right: 100% !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Title and description */
.driver-popover-title {
}
.driver-popover-description {
    @apply text-muted-foreground !important;
}

/* Close button displayed on the top right corner */
.driver-popover-close-btn {
    @apply text-muted-foreground text-2xl mr-1 mt-1 !important;
}

.driver-popover-close-btn:hover {
    @apply text-foreground !important;
}

/* Footer of the popover displaying progress and navigation buttons */
.driver-popover-footer {
}

.driver-popover-progress-text {
}

.driver-popover-prev-btn {
    /* remove the text shadow */
    text-shadow: none !important;
    @apply text-foreground bg-secondary font-medium text-sm border-none px-3 py-1 hover:shadow-lg hover:shadow-neutral-300 dark:hover:shadow-secondary transition-all duration-200 !important;
}

.driver-popover-next-btn {
    /* remove the text shadow */
    text-shadow: none !important;
    @apply text-white bg-primary font-medium text-sm border-none px-3 py-1 hover:shadow-lg hover:shadow-primary transition-all duration-200 !important;
}
