@use 'sass:map';
@use 'igniteui-theming/sass/themes' as *;
@use '../../../../../core/styles/themes/scoping' as *;

/// Emits the derived token overrides for the sub-components rendered inside
/// `igx-column-actions`, computed from the column-actions' own background, foreground and
/// accent tokens. Emitted once per theme into the `ig.derived` cascade layer.
/// @access private
/// @param {Map} $schema - The active theme schema used to resolve the sub-component themes.
/// @requires {mixin} scope
/// @requires {mixin} tokens
/// @requires {function} digest-schema
/// @output Scoped CSS custom properties for the sub-components, under `:where(.igx-column-actions)`.
@mixin derived-themes($schema) {
    // .igx-column-actions is applied via host binding regardless of the tag name a consumer
    // (e.g. igniteui-angular-elements) uses.
    @include scope(derived, '.igx-column-actions', $schema) using ($schema) {
        --_column-actions-background: var(--background, var(--ig-column-actions-background));
        --_column-actions-foreground: var(--foreground, var(--ig-column-actions-foreground));
        --_column-actions-accent-color: var(--accent-color, var(--ig-column-actions-accent-color));

        @include tokens(
            checkbox-theme(
                $schema: $schema,
                $empty-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
                $empty-fill-color: var(--_column-actions-background),
                $tick-color-hover: color-mix(in srgb, var(--_column-actions-foreground) 40%, var(--_column-actions-background)),
                $fill-color: var(--_column-actions-accent-color),
                $label-color: var(--_column-actions-foreground),
                $disabled-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background)),
            )
        );

        @include tokens(
            drop-down-theme(
                $schema: $schema,
                $background-color: var(--_column-actions-background),
                $item-text-color: var(--_column-actions-foreground),
                $border-color: color-mix(in srgb, var(--_column-actions-foreground) 12%, var(--_column-actions-background)),
                $hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 8%, var(--_column-actions-background)),
                $focused-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
                $selected-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
                $selected-hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 16%, var(--_column-actions-background)),
                $selected-focus-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 24%, var(--_column-actions-background)),
            )
        );

        @include tokens(
            flat-button-theme(
                $schema: $schema,
                $foreground: var(--_column-actions-accent-color),
                $disabled-background: transparent,
                $disabled-foreground: color-mix(in srgb, var(--_column-actions-accent-color) 50%, var(--_column-actions-background)),
            )
        );

        @include tokens(
            input-group-theme(
                $schema: $schema,
                $box-background: var(--_column-actions-background),
                $idle-bottom-line-color: var(--_column-actions-accent-color),
                $border-color: var(--_column-actions-accent-color),
                $idle-text-color: var(--_column-actions-foreground),
                $placeholder-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
            )
        );

        $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
        $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
        $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
        $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');

        --_scrollbar-thumb-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background));
        --_scrollbar-track-border-color: color-mix(in srgb, var(--_column-actions-foreground) 16%, var(--_column-actions-background));

        @include tokens(
            scrollbar-theme(
                $schema: $schema,
                $sb-track-bg-color: var(--_column-actions-background, $scrollbar-bg-color),
                $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
                $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
            ),
            $mode: 'scoped'
        );
    }
}