// Dark Mode shorthand.

@mixin dark-mode {
    body.darkmode { //@media (prefers-color-scheme: dark)
        @content;
    }
}

// higher resolution background images for high resolution displays

@mixin hires-graphic($hdfile, $hdtype, $hdwidth, $hdheight) {
    $filename: $hdfile + "." + $hdtype !default;
    $hdfilename: $hdfile + "@2x." + $hdtype !default;
    background-image: url("../img/" + $filename);
    background-size: $hdwidth $hdheight;

    @media (min-resolution: 1.25dppx), (min-resolution: 120dpi) { background-image: url("../img/" + $hdfilename); }
}

// standard gradients

@mixin gradient-linear($color-gradient-from, $color-gradient-to) {
    background-color: $color-gradient-to;

    @if $color-gradient-from != $color-gradient-to { // only render gradient if colours are not equal
        background-image: linear-gradient($color-gradient-from, $color-gradient-to);
    }
}

@mixin gradient-radial($color-gradient-from, $color-gradient-to) {
    background-color: $color-gradient-to;

    @if $color-gradient-from != $color-gradient-to { // only render gradient if colours are not equal
        background-image: radial-gradient($color-gradient-from, $color-gradient-to);
    }
}

// hide text

@mixin hide-text {
    overflow: hidden;
    text-indent: 110%;
    text-transform: capitalize;
    white-space: nowrap;
}