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

/// @param {Map} $theme - The calendar theme used to style the component.
/// @requires $elevations
/// @requires igx-elevation
/// @requires rem
@mixin igx-date-picker($theme) {
    $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));

    %date-picker {
        min-width: 200px;
        box-shadow: igx-elevation($elevations, 24);
        border-radius: --var($theme, 'border-radius');
        background: --var($theme, 'content-background');
        overflow: hidden;

        %cal-display {
            background: --var($theme, 'content-background');
        }

        %cal-header-display {
            background: --var($theme, 'header-background');
            color: --var($theme, 'header-text-color');
        }

        %cal-picker-arrow {
            color: --var($theme, 'picker-arrow-color');

            &:hover {
                color: --var($theme, 'picker-arrow-hover-color');
            }
        }

        %cal-picker-date {
            color: --var($theme, 'picker-text-color');

            &:hover,
            &:focus {
                color: --var($theme, 'picker-text-hover-color');
            }
        }

        %cal-value {
            color: --var($theme, 'content-text-color');
            flex-basis: 14.28%;
        }

        %cal-value--label {
            color: --var($theme, 'inactive-text-color');
        }

        %cal-value--weekend {
            color: --var($theme, 'weekend-text-color');
        }

        %cal-value--special {
            color: --var($theme, 'date-special-text-color');
            background: --var($theme, 'date-special-background');
        }

        %cal-value--disabled {
            color: --var($theme, 'date-disabled-text-color');
        }

        %cal-value--year-current {
            color: --var($theme, 'year-current-text-color');
        }

        %cal-value--year-hover {
            color: --var($theme, 'year-hover-text-color');
        }

        %cal-value--month-hover {
            color: --var($theme, 'month-hover-text-color');
        }

        %cal-value--month-current {
            color: --var($theme, 'month-current-text-color');
        }

        %cal-value--inactive {
            color: --var($theme, 'inactive-text-color');
        }

        %cal-value--selected {
            color: --var($theme, 'date-selected-text-color');
            // background: --var($theme, 'date-selected-background') !important;
        }

        %cal-value--current {
            color: --var($theme, 'date-current-text-color');
        }

        %cal-value--hover {
            %cal-value-content::after {
                background: --var($theme, 'date-hover-background');
            }

            &%cal-value--selected %cal-value-content::after {
                background: rgba($selected-hover-color, .18);
            }
        }
    }

    %date-picker--vertical {
        min-width: 368px; /* 168px for header + 200px for the content */
        max-width: 540px;
    }

    %date-picker--dropdown {
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
        box-shadow: igx-elevation($elevations, 3);
    }

    %date-picker__buttons {
        display: flex;
        justify-content: flex-end;
        padding: rem(8px);
    }
}