@use 'sass:map';
@use '../../base' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

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

    $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px));
    $panel-padding-header-indigo: pad-block(rem(10px)) pad-inline(rem(16px));
    $panel-padding-body-indigo: pad-block(rem(4px)) pad-inline(rem(16px)) pad-block(rem(16px));

    %igx-expansion-panel {
        display: flex;
        flex-direction: column;
        border-radius: var-get($theme, 'border-radius');
        overflow: hidden;
        transition: margin 350ms $out-quad;
    }

    %igx-expansion-panel__header-title {
        color: var-get($theme, 'header-title-color');
        margin-inline-end: rem(16px, 16px);
    }

    %igx-expansion-panel__header-description {
        color: var-get($theme, 'header-description-color');
    }

    %igx-expansion-panel__header-title,
    %igx-expansion-panel__header-description {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    %igx-accordion {
        overflow-y: auto;

        %igx-expansion-panel__header-title {
            @include line-clamp(4, true, true);

            white-space: initial;
            word-wrap: break-word;
        }

        %igx-expansion-panel--expanded {
            margin: var-get($theme, 'expanded-margin') 0;

            &:first-of-type {
                margin-top: 0;
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    %igx-expansion-panel__header-inner {
        display: flex;
        align-items: center;
        padding: $panel-padding;
        cursor: pointer;
        background: var-get($theme, 'header-background');

        &:focus,
        &:active
        {
            background: var-get($theme, 'header-focus-background');
            outline: transparent;
        }

        @if $variant == 'indigo' {
            padding: $panel-padding-header-indigo;
        }
    }

    %igx-expansion-panel__title-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 0 0%;
        overflow: hidden;

        @if $variant == 'indigo' {
            %igx-expansion-panel__header-title {
                margin-block-end: rem(2px);
            }
        }
    }

    %igx-expansion-panel__header-icon--end {
        order: 1;
        margin-inline-start: rem(16px, 16px);

        @if $variant == 'indigo' {
            margin-inline-start: rem(8px, 16px);
        }
    }

    %igx-expansion-panel__header-icon--start {
        order: -1;
        margin-inline-end: rem(16px, 16px);

        @if $variant == 'indigo' {
            margin-inline-end: rem(8px, 16px);
        }
    }

    %igx-expansion-panel__header-icon--none {
        display: none;
    }

    %igx-expansion-panel__header-icon--end,
    %igx-expansion-panel__header-icon--start {
        display: flex;
        align-content: center;
        justify-content: center;
        user-select: none;

        color: var-get($theme, 'header-icon-color');

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

        @if $variant == 'indigo' {
            igx-icon {
                --component-size: 2;
            }
        }
    }

    %igx-expansion-panel__body {
        color: var-get($theme, 'body-color');
        background: var-get($theme, 'body-background');
        overflow: hidden;
        padding: $panel-padding;

        @if $variant == 'indigo' {
            padding: $panel-padding-body-indigo;
        }
    }

    %igx-expansion-panel--disabled {
        pointer-events: none;

        %igx-expansion-panel__header-title {
            color: var-get($theme, 'disabled-text-color')
        }

        %igx-expansion-panel__header-description {
            color: var-get($theme, 'disabled-description-color')
        }

        %igx-expansion-panel__header-icon--start,
        %igx-expansion-panel__header-icon--end {
            igx-icon {
                color: var-get($theme, 'disabled-text-color');
            }
        }
    }
}

/// Adds typography styles for the igx-expansion-panel component.
/// @group typography
/// @param {Map} $categories [(title: 'h5', description: 'subtitle-2', body: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin expansion-panel-typography($categories: (
    title: 'h5',
    description: 'subtitle-2',
    body: 'body-2')
) {
    $title: map.get($categories, 'title');
    $description: map.get($categories, 'description');
    $body: map.get($categories, 'body');

    %igx-expansion-panel__header-title {
        @include type-style($title) {
            margin: 0;
        }
    }

    %igx-expansion-panel__header-description {
        @include type-style($description) {
            margin: 0;
        }
    }

    %igx-expansion-panel__body {
        @include type-style($body) {
            margin: 0;
        }
    }
}