@use '../settings/include-media' as *;

@mixin trumps-rwd() {
    /**
    * Responsive Trumps
    * ===================================
    */

    //
    // Responsive helper classes to show/hide content based on our media-queries
    // =================================================================================
    .u-showBelowNarrow {
        @include media('>=narrow') {
            display: none !important;
        }
    }

    .u-showBelowMid {
        @include media('>=mid') {
            display: none !important;
        }
    }

    .u-showBelowWide {
        @include media('>=wide') {
            display: none !important;
        }
    }

    .u-showBelowHuge {
        @include media('>=huge') {
            display: none !important;
        }
    }

    .u-showAboveNarrow {
        @include media('<=narrow') {
            display: none !important;
        }
    }

    .u-showAboveTiny {
        @include media('<=tiny') {
            display: none !important;
        }
    }

    .u-showAboveMid,
    .no-js .u-showAboveMid--noJS {
        @include media('<mid') {
            display: none !important;
        }
    }

    .u-showAboveWide {
        @include media('<wide') {
            display: none !important;
        }
    }

    .u-showAboveHuge {
        @include media('<huge') {
            display: none !important;
        }
    }

    .u-hideOnMid {
        @include media('>mid', '<wide') {
            display: none !important;
        }
    }
}