@use 'sass:map';
@use '../../themes/mixins' as *;
@use '../../themes/functions' as *;
@use '../../themes/config' as *;
@use '../mixins.scss' as *;

$theme-schemas: () !default;

@mixin tailwind-themes() {
    @include configure-variable-prefix('ig');

    // Avatar
    @include tailwind-theme(
        $component: avatar,
        $props: (
            background,
        )
    );

    // Badge
    @include tailwind-theme(
        $component: badge,
        $props: (
            background-color,
        )
    );

    // Bottom Navigation
    @include tailwind-theme(
        $component: bottom-nav,
        $props: (
            background,
        )
    );

    // Button Group
    @include tailwind-theme(
        $component: button-group,
        $props: (
            item-background,
        )
    );

    // Flat Button
    @include tailwind-theme(
        $component: flat-button,
        $props: (
            foreground,
        )
    );

    // Contained Button
    @include tailwind-theme(
        $component: contained-button,
        $props: (
            background,
        )
    );

    // Outlined Button
    @include tailwind-theme(
        $component: outlined-button,
        $props: (
            foreground,
        )
    );

    // FAB Button
    @include tailwind-theme(
        $component: fab-button,
        $props: (
            background,
        )
    );

    // Card
    @include tailwind-theme(
        $component: card,
        $props: (
            background,
        )
    );

    // Chip
    @include tailwind-theme(
        $component: chip,
        $props: (
            background,
        )
    );

    // Carousel
    @include tailwind-theme(
        $component: carousel,
        $props: (
            button-background,
            indicator-background,
        )
    );

    // Calendar
    @include tailwind-theme(
        $component: calendar,
        $props: (
            header-background,
            content-background,
        )
    );

    // Checkbox
    @include tailwind-theme(
        $component: checkbox,
        $props: (
            empty-color,
            fill-color,
        )
    );

    // Combo
    @include tailwind-theme(
        $component: combo,
        $props: (
            toggle-button-background,
        )
    );

    // // Expansion Panel
    @include tailwind-theme(
        $component: expansion-panel,
        $props: (
            header-background,
            body-background,
        )
    );

    // Grid
    @include tailwind-theme(
        $component: grid,
        $props: (
            content-background,
        )
    );

    // Icon
    @include tailwind-theme(
        $component: icon,
        $props: (
            color,
        )
    );

    // Flat Icon Button
    @include tailwind-theme(
        $component: flat-icon-button,
        $props: (
            foreground,
        )
    );

    // Contained Icon Button
    @include tailwind-theme(
        $component: contained-icon-button,
        $props: (
            background,
        )
    );

    // Outlined Icon Button
    @include tailwind-theme(
        $component: outlined-icon-button,
        $props: (
            foreground,
        )
    );

    // Input Group
    @include tailwind-theme(
        $component: input-group,
        $props: (
            box-background,
            search-background,
            border-color,
        )
    );

    // List
    @include tailwind-theme(
        $component: list,
        $props: (
            background,
            item-background,
        )
    );

    // Navbar
    @include tailwind-theme(
        $component: navbar,
        $props: (
            background,
        )
    );

    // // Navdrawer
    @include tailwind-theme(
        $component: navdrawer,
        $props: (
            background,
        )
    );

    // Query Builder
    @include tailwind-theme(
        $component: query-builder,
        $props: (
            background,
        )
    );

    // Radio
    @include tailwind-theme(
        $component: radio,
        $props: (
            empty-color,
            fill-color,
        )
    );

    // Select
    @include tailwind-theme(
        $component: select,
        $props: (
            toggle-button-background,
        )
    );

    // Snackbar
    @include tailwind-theme(
        $component: snackbar-theme,
        $props: (
            background,
        )
    );

    // Splitter
    @include tailwind-theme(
        $component: splitter,
        $props: (
            bar-color,
        )
    );

    // Stepper
    @include tailwind-theme(
        $component: stepper,
        $props: (
            step-background,
        )
    );

    // Tabs
    @include tailwind-theme(
        $component: tabs,
        $props: (
            item-background,
        )
    );

    // Toast
    @include tailwind-theme(
        $component: toast,
        $props: (
            background,
        )
    );

    // Tooltip
    @include tailwind-theme(
        $component: tooltip,
        $props: (
            background,
        )
    );

    // Tree - use with tree-node, not tree directly
    @include tailwind-theme(
        $component: tree,
        $props: (
            background,
        )
    );
}