@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin action-strip($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'theme');
    $icon-button-size: map.get((
        'material': rem(36px),
        'fluent': rem(32px),
        'bootstrap': rem(36px),
        'indigo': rem(36px),
    ), $variant);
    $button-size: sizable(rem(28px), rem(28px), $icon-button-size);
    $icon-size: sizable(rem(14px), rem(14px), rem(18px));

    %igx-action-strip {
        @include sizable();
        --action-strip-size: var(--component-size);

        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        top: 0;
        inset-inline-start: 0;
        background: var-get($theme, 'background');
        color: inherit;
        padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
        padding-block: 0;
        z-index: 9999;

        [igxIconButton] {
            --component-size: var(--action-strip-size) !important;

            width: $button-size;
            height: $button-size;

            igx-icon {
                --component-size: var(--action-strip-size);

                width: var(--ig-icon-size, $icon-size);
                height: var(--ig-icon-size, $icon-size);
                font-size: var(--ig-icon-size, $icon-size);
            }
        }
    }

    %igx-action-strip__editing-actions,
    %igx-action-strip__pinning-actions {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    %igx-action-strip__menu-item {
        [igxLabel] {
            cursor: pointer;
        }

        igx-icon {
            --component-size: var(--action-strip-size);

            width: var(--ig-icon-size, rem(18px));
            height: var(--ig-icon-size, rem(18px));
            font-size: var(--ig-icon-size, rem(18px));
        }

        &%igx-drop-down__item {
            igx-icon + [igxLabel] {
                margin-inline-start: pad-inline(rem(8px), rem(10px), rem(12px));
            }
        }
    }

    %igx-action-strip__menu-item--danger {
        color: color($color: 'error');

        &:hover {
            color: color($color: 'error');
        }
    }

    %igx-action-strip__menu-button {
        display: flex;
        align-items: center;
    }

    %igx-action-strip__actions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        position: relative;
        color: var-get($theme, 'icon-color');
        border-radius: var-get($theme, 'actions-border-radius');
        background: var-get($theme, 'actions-background');
        max-height: rem(36px);

        &:last-child {
            margin-inline-end: 0;
        }

        igx-icon {
            color: var-get($theme, 'icon-color');
        }

        [igxIconButton] {
            igx-icon {
                color: var-get($theme, 'icon-color');
            }

            @if $variant == 'indigo' or $variant == 'fluent' {
                border-radius: var-get($theme, 'actions-border-radius');
            }
        }
    }

    %igx-action-strip__editing-actions {
        > [igxButton] {
            margin-inline-start: rem(4px);

            &:first-of-type {
                margin-inline-start: 0;
            }
        }
    }

    %igx-action-strip__delete {
        igx-icon {
            color: var-get($theme, 'delete-action');
        }

        [igxIconButton] {
            igx-icon {
                color: var-get($theme, 'delete-action');
            }
        }
    }
}