////
/// @group themes
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

@use '../base';

// Used to configure color accessibility for charts
@use 'igniteui-theming/sass/color/functions' as color;
@use 'igniteui-theming/sass/themes' as theming;

// Common components
@use '../components/_common/igx-control';
@use '../components/_common/igx-display-container' as display-container;
@use '../components/_common/igx-drag' as drag;
@use '../components/_common/igx-vhelper' as vhelper;
@use '../components/ripple/ripple-component' as ripple;

// Directive / global-scope components
@use '../components/button/button-component' as button;
@use '../components/charts/category-chart-component' as category-chart;
@use '../components/charts/data-chart-component' as data-chart;
@use '../components/charts/doughnut-chart-component' as doughnut-chart;
@use '../components/charts/financial-chart-component' as financial-chart;
@use '../components/charts/funnel-chart-component' as funnel-chart;
@use '../components/charts/gauge-component' as gauge;
@use '../components/charts/geo-map-component' as geo-map;
@use '../components/charts/graph-component' as graph;
@use '../components/charts/pie-chart-component' as pie-chart;
@use '../components/charts/shape-chart-component' as shape-chart;
@use '../components/charts/sparkline-component' as sparkline;
@use '../components/highlight/highlight-component' as highlight;
@use '../components/icon-button/icon-button-component' as icon-button;
@use '../components/label/label-component' as label;
@use '../components/overlay/overlay-component' as overlay;
@use '../components/scrollbar/scrollbar-component' as scrollbar;
@use '../components/tooltip/tooltip-component' as tooltip;
@use '../components/watermark/watermark-component' as watermark;
@use '../print';

/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
/// @param {boolean} $enhanced-accesibility [false] - Switches component colors and other properties to more accessible values.
@mixin core($print-layout: true, $enhanced-accessibility: false) {
    @include color.configure-colors($enhanced-accessibility);

    // Angular hack for binding to [hidden] property
    // not working
    [hidden] {
        display: none !important;
    }

    // Common styles
    @include vhelper.component();
    @include display-container.component();
    @include drag.component();

    // Includes the base for each theme.
    [class^='igx-'],
    [class^='ig-'] {
        &,
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }

    @include theming.sizing();
    @include theming.spacing();

    @property --_transition-delay {
        syntax: '<time>';
        initial-value: -1s;
        inherits: true;
    }

    @property --_progress-integer {
        syntax: '<number>';
        initial-value: 0;
        inherits: true;
    }

    @property --_progress-fraction {
        syntax: '<number>';
        initial-value: 0;
        inherits: true;
    }

    @property --ig-theme {
        syntax: 'material | indigo | fluent | bootstrap';
        initial-value: material;
        inherits: true;
    }

    @property --ig-theme-variant {
        syntax: 'light | dark';
        initial-value: light;
        inherits: true;
    }

    @property --vhelper-scollbar-size {
        syntax: '<length>';
        initial-value: 16px;
        inherits: true;
    }

    // Global component styles either angular directives or shared component styles
    @include button.component();
    @include category-chart.component();
    @include data-chart.component();
    @include doughnut-chart.component();
    @include financial-chart.component();
    @include funnel-chart.component();
    @include gauge.component();
    @include geo-map.component();
    @include graph.component();
    @include highlight.component();
    @include icon-button.component();
    @include label.component();
    @include overlay.component();
    @include pie-chart.component();
    @include ripple.component();
    @include shape-chart.component();
    @include scrollbar.component();
    @include sparkline.component();
    @include tooltip.component();
    @include watermark.component();

    // Register components whose structural styles now live in their own
    // scoped *.component.scss (compiled per Angular component) rather than
    // being included here. They no longer have a `.component()` mixin to
    // call, but `theme()`'s `$exclude`/`is-used()` machinery still needs
    // them present in the registry — otherwise they can never be named in
    // $exclude (map-keys($components) wouldn't know about them) and
    // is-used() can't reason about their dependents. Deps restored from the
    // last pre-scoped-styles registration (master).
    @include base.register-component(
        'igx-action-strip',
        $deps: (igx-icon-button, igx-drop-down, igx-icon)
    );
    @include base.register-component('igx-avatar', $deps: (igx-icon));
    @include base.register-component('igx-badge', $deps: (igx-icon));
    @include base.register-component(
        'igx-banner',
        $deps: (igx-button, igx-expansion-panel, igx-icon)
    );
    @include base.register-component('igx-bottom-nav', $deps: (igx-icon));
    @include base.register-component('igx-button-group', $deps: (igx-button));
    @include base.register-component('igx-calendar', $deps: (igx-icon));
    @include base.register-component('igx-card', $deps: (igx-icon, igx-button));
    @include base.register-component('igx-carousel', $deps: (igx-icon));
    @include base.register-component('igx-checkbox');
    @include base.register-component('igx-chip', $deps: (igx-icon));
    @include base.register-component('igx-circular-bar');
    @include base.register-component('igx-column-actions');
    @include base.register-component(
        'igx-combo',
        $deps: (igx-checkbox, igx-drop-down, igx-input-group, igx-icon)
    );
    @include base.register-component('igx-date-picker', $deps: (igx-calendar));
    @include base.register-component(
        'igx-date-range-picker',
        $deps: (igx-calendar, igx-input-group)
    );
    @include base.register-component(
        'igx-dialog',
        $deps: (igx-button, igx-overlay)
    );
    @include base.register-component('igx-divider');
    @include base.register-component(
        'igc-dockmanager',
        $deps: (igc-trial-watermark)
    );
    @include base.register-component('igx-drop-down', $deps: (igx-overlay));
    @include base.register-component('igx-expansion-panel', $deps: (igx-icon));
    @include base.register-component(
        'igx-file-input',
        $deps: (igx-input-group)
    );
    @include base.register-component(
        'igx-grid',
        $deps: (
            igx-checkbox,
            igx-chip,
            igx-grid-excel-style-filtering,
            igx-grid-summary,
            igx-icon-button,
            igx-input-group,
            igx-grid-toolbar,
            igx-paginator,
            igx-query-builder,
            igc-trial-watermark
        )
    );
    @include base.register-component(
        'igx-grid-excel-style-filtering',
        $deps: (igx-button, igx-checkbox, igx-icon-button, igx-input-group)
    );
    @include base.register-component('igx-grid-summary', $deps: (igx-icon));
    @include base.register-component(
        'igx-grid-toolbar',
        $deps: (
            igx-button,
            igx-column-actions,
            igx-icon,
            igx-linear-bar,
            igx-drop-down
        )
    );
    @include base.register-component('igx-icon');
    @include base.register-component('igx-input-group', $deps: (igx-icon));
    @include base.register-component('igx-linear-bar');
    @include base.register-component('igx-list');
    @include base.register-component('igx-nav-drawer');
    @include base.register-component('igx-navbar', $deps: (igx-icon));
    @include base.register-component(
        'igx-paginator',
        $deps: (igx-button, igx-icon-button, igx-input-group)
    );
    @include base.register-component('igx-pivot-data-selector');
    @include base.register-component(
        'igx-query-builder',
        $deps: (
            igx-icon,
            igx-button,
            igx-chip,
            igx-select,
            igx-input-group,
            igx-icon-button,
            igx-overlay
        )
    );
    @include base.register-component('igx-radio');
    @include base.register-component('igc-rating');
    @include base.register-component(
        'igx-select',
        $deps: (igx-checkbox, igx-drop-down, igx-input-group, igx-icon)
    );
    @include base.register-component('igx-slider');
    @include base.register-component(
        'igx-snackbar',
        $deps: (igx-button, igx-overlay)
    );
    @include base.register-component('igx-splitter');
    @include base.register-component('igx-stepper');
    @include base.register-component('igx-switch');
    @include base.register-component('igx-tabs', $deps: (igx-button, igx-icon));
    @include base.register-component(
        'igx-time-picker',
        $deps: (igx-icon, igx-input-group)
    );
    @include base.register-component('igx-toast', $deps: (igx-overlay));
    @include base.register-component(
        'igx-tree',
        $deps: (igx-checkbox, igx-icon)
    );

    // Build the component dependency-tree
    @include base.dependecy-tree(base.$components);

    @if $print-layout == true {
        @include print.layout();
    }

    @keyframes enable-transitions {
        to {
            --_transition-delay: 0s;
        }
    }
}