// Desktop breakpoint @mixin on-desktop {

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

} @mixin on-tablet {

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

} @mixin on-mobile {

@media screen and (max-width: $breakpoint-mobile) {
    @content;
}

} @mixin not-on-mobile {

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

}

// Page section mixin @mixin page-section {

display: block;
margin: $spacing-3 auto;

}

// Color function @function color-for($name) {

@return map-get($theme-map, $name);

}

// Theme mixin @mixin with-theme {

transition: background-color 0.5s ease-in-out,
            color 0.5s ease-in-out;

// Apply light theme as default
$theme-map: map-get($themes, "colormode-light") !global;
@content;
$theme-map: null !global;

// Apply dark theme if darkmode
@media screen and (prefers-color-scheme: dark) {
    $theme-map: map-get($themes, "colormode-dark") !global;
    @content;
    $theme-map: null !global;
}

// Set all colors for sub themes
@each $theme, $map in $themes {
    // Apply all of the themes
    .#{$theme} &, &.#{$theme} {
        $theme-map: $map !global;
        @content;
        $theme-map: null !global;
    }
}

}