@import 'variables';
@import 'themes';

/* -------------------------- MEDIA QUERIES -------------------------- */
@mixin mobile-only {
    @media only screen and (max-width: $breakpoint-mobile) {
        @content;
    }
}

@mixin mobile-and-up {
    @media only screen and (min-width: $breakpoint-mobile) {
        @content;
    }
}

// tablet
@mixin tablet-and-down {
    @media only screen and (max-width: $breakpoint-tablet) {
        @content;
    }
}

@mixin tablet-and-up {
    @media only screen and (min-width: $breakpoint-mobile) {
        @content;
    }
}

// laptop
@mixin laptop-and-up {
    @media only screen and (min-width: $breakpoint-tablet) {
        @content;
    }
}

/* -------------------------- END MEDIA QUERIES -------------------------- */


/* -------------------------------- THEMES -------------------------------- */

@mixin themify($themes: $themes) {
    @each $theme, $map in $themes {
  
        .theme-#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
            $value: map-get(map-get($themes, $theme), '#{$key}');
            $theme-map: map-merge($theme-map, ($key: $value)) !global;
            }
    
            @content;
            $theme-map: null !global;
        }
    }
}

/* -------------------------------- END THEMES -------------------------------- */

/* ---------------------------------- COLORS ---------------------------------- */

@mixin green {
    background-color: $green !important;
    color: white;
}

@mixin orange {
    background-color: $orange !important;
    color: white;
}

@mixin red {
    background-color: $red !important;
    color: white;
}

/* -------------------------------- END COLORS -------------------------------- */