/// Media query
///
/// Shorthand @media alias that keeps media query rules to a defined set of
/// breakpoints.
///
/// @param {string} $breakpoint - name of the breakpoint to use
///
/// @example scss
///   @include ds_media-query(medium) {
///     .my-element {
///        display: block;
///     }
///   }

@use "sass:map";
@use "../../settings";

@mixin ds_media-query($breakpoint) {
    // validate param
    @if not map.has-key(settings.$ds_breakpoints, $breakpoint) {
        @error 'Breakpoint "#{$breakpoint}" not defined.';
    }

    $condition: map.get(settings.$ds_breakpoints, $breakpoint);

    @media #{$condition} {
        @content;
    }
}

/// Media query: high contrast
///
/// Shorthand @media alias for "forced colors" and "prefers contrast"
///
/// @example scss
///   @include ds_media-query-high-contrast {
///     .my-element {
///        color: LinkText;
///     }
///   }

@mixin ds_media-query-high-contrast {
    @media screen and (forced-colors: active) {
        @content;
    }
}

@mixin ds_media-query-high-contrast--invert {
    @media screen and (forced-colors: none) {
        @content;
    }
}



/// legacy non-prefixed name
/// DEPRECATED - use prefixed mixin instead
@mixin media-query($breakpoint) {
    // validate param
    @if not map.has-key(settings.$ds_breakpoints, $breakpoint) {
        @error 'Breakpoint "#{$breakpoint}" not defined.';
    }

    $condition: map.get(settings.$ds_breakpoints, $breakpoint);

    @media #{$condition} {
        @content;
    }
}