/**
* Global Mixins
*/
@import 'colors';

/**  theme based mixin
* $primary-color to return the theme based primary color
* $secondary-color to return the theme based secondary color
* Usage:
* - apply theme to body `body class="theme-red"`
*   .selector {
*     @include app-themes {
*       border-bottom: 1px solid $secondary-color;
*       color: $primary-color;
*     }
*   }
*/

@mixin app-themes() {
  @each $theme, $palette in $theme-colors {
    :host-context(.theme-#{$theme}) & {
      $primary-color: map-get($palette, primary) !global;
      $secondary-color: map-get($palette, secondary) !global;
      $grad1-color: map-get($palette, grad1) !global;
      $grad2-color: map-get($palette, grad2) !global;
      $neutral-color: map-get($palette, neutral) !global;
      @content;
    }
  }
}

@mixin label-inactive() {
  font-size: 1.2rem;
  transform: translateY(0);
}

@mixin label-active() {
  font-size: 0.75rem;
  transform: translateY(-14px);
}