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

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {color} $label-color [null] - The color for date range separator label.
@function date-range-picker-theme(
    $schema: $light-material-schema,
    $label-color: null
) {
    $name: 'igx-date-range-picker';
    $date-range-schema: ();

    @if map.has-key($schema, 'date-range') {
        $date-range-schema: map.get($schema, 'date-range');
    } @else {
        $date-range-schema: $schema;
    }

    $theme: digest-schema($date-range-schema);

    @return extend($theme, (
        name: $name,
        label-color: $label-color,
    ));
}

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

    %igx-date-range-picker {
        display: flex;

        > igx-icon {
            cursor: pointer;
        }

        igx-input-group {
            flex: 1;
        }

        igx-calendar {
            box-shadow: none;
        }
    }

    igx-date-range-start,
    igx-date-range-end,
    %igx-date-range-picker__start,
    %igx-date-range-picker__end {
        flex: 1 0 0%;
    }

    %igx-date-range-picker__label {
        display: flex;
        align-items: center;
        color: var-get($theme, 'label-color');
        margin: 0 rem(8px);
    }

    %igx-date-range-picker-buttons {
        display: flex;
        justify-content: flex-end;
        padding: 0 rem(16px) rem(16px);

        > * {
            margin-inline-end: rem(8px);

            &:last-of-type {
                margin-inline-end: 0;
            }
        }

        &:empty {
            display: none;
        }
    }
}

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

    %igx-date-range__label {
        @include type-style($label);
    }
}