@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 divider($theme) {
    @include css-vars($theme);

    $variant: map.get($theme, '_meta', 'theme');

    %igx-divider-display {
        position: relative;
        justify-content: center;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            background: var-get($theme, 'color');
        }
    }

    %igx-divider-display:not(%igx-divider--vertical) {
        display: flex;
        min-height: rem(1px);
        min-width: rem(1px);
        position: relative;

        &::after {
            inset-inline-start: var-get($theme, 'inset');
        }

        &:not(%igx-divider--inset) {
            &::after {
                width: 100%;
            }
        }
    }

    %igx-divider--inset:not(%igx-divider--vertical) {
        &::after {
            min-width: rem(4px);
            width: calc(100% - (var-get($theme, 'inset') * 2));
        }
    }

    %igx-divider--dashed:not(%igx-divider--vertical) {
        &::after {
            background: repeating-linear-gradient(
                to right,
                var-get($theme, 'color'),
                var-get($theme, 'color') rem(10px),
                transparent rem(10px),
                transparent rem(20px)
            );

            @if $variant == 'indigo' {
                background: repeating-linear-gradient(
                    to right,
                    var-get($theme, 'color'),
                    var-get($theme, 'color') rem(3px),
                    transparent rem(3px),
                    transparent rem(6px)
                );
            }
        }
    }

    %igx-divider--dashed {
        &::after {
            background: repeating-linear-gradient(
                to bottom,
                var-get($theme, 'color'),
                var-get($theme, 'color') rem(10px),
                transparent rem(10px),
                transparent rem(20px)
            );

            @if $variant == 'indigo' {
                background: repeating-linear-gradient(
                    to bottom,
                    var-get($theme, 'color'),
                    var-get($theme, 'color') rem(3px),
                    transparent rem(3px),
                    transparent rem(6px)
                );
            }
        }
    }

    %igx-divider--vertical {
        display: inline-flex;
        min-width: rem(1px);
        width: rem(1px);

        &::after {
            inset-block-start: var-get($theme, 'inset');
            width: 100%;
            height: 100%;
        }
    }

    %igx-divider--vertical-inset {
        &::after {
            min-height: rem(4px);
            height: calc(100% - (var-get($theme, 'inset') * 2));
        }
    }
}