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

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin column-actions($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'theme');

    %column-actions-display {
        display: flex;
        flex-flow: column nowrap;
        background: var-get($theme, 'background-color');
        box-shadow: elevation(8);
        width: 100%;
        flex: 1 1 auto;
        min-width: rem(180px);

        @if $variant == 'material' {
            %cbx-composite-wrapper {
                padding: 0;
            }

            %cbx-label-pos--after {
                margin-inline-start: rem(12px);
            }

            %cbx-label-pos--before {
                margin-inline-end: rem(12px);
            }

            %cbx-label-pos--before,
            %cbx-label-pos--after {
                &:empty {
                    margin: 0;
                }
            }
        }
    }

    %column-actions-title {
        color: var-get($theme, 'title-color');
        margin: 0;
        padding: rem(16px) rem(16px) rem(8px);
    }

    %column-actions-input {
        font-size: rem(16px) !important;
        margin: 0 !important;
        padding: rem(8px) rem(16px);
    }

    %column-actions-columns {
        display: flex;
        flex-flow: column nowrap;
        overflow-y: auto;
        outline-style: none;
    }

    %column-actions-item {
        padding: rem(4px) rem(16px);
        min-height: rem(32px);
    }

    %column-actions-buttons {
        display: flex;
        justify-content: flex-end;
        padding: rem(8px) rem(16px);
    }
}

/// Adds typography styles for the igx-column-actions component.
/// Uses the 'subtitle-1'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(title: 'subtitle-1')] - The categories from the typographic scale used for type styles.
@mixin column-actions-typography($categories: (title: 'subtitle-1')) {
    $title: map.get($categories, 'title');

    %column-actions-title {
        @include type-style($title) {
            margin: 0;
        }
    }
}