theme.scss

@use 'sass:map';
@use '@angular/material' as mat;

@include mat.core();

@mixin custom-cmp($theme) {
  $color-config: mat.get-color-config($theme);

  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  $primary: map-get($color-config, primary);
  $accent: map-get($color-config, accent);
  $warn: map-get($color-config, warn);

  [sxplr-custom-cmp],
  .sxplr-custom-cmp
  {
    color: mat.get-color-from-palette($foreground, text);
    
    &.hoverable
    {
      padding: 1rem 1.3rem;
      &:hover
      {
        cursor: pointer;
        background-color: mat.get-color-from-palette($background, 100);
      }
    }

    &[target="_blank"]
    {
      // TODO it seems unicode does not have an external link character.
      // will have to use SVG as background image or something

      // &::after
      // {
      //   content: "";
      //   display: inline-block;
        
      // }
    }

    &[card],
    &.card
    {
      padding: 0 1em 0 1.5em;
      border-radius: 0.25em;
    }

    &[bg],
    &.bg
    {
      background-color: mat.get-color-from-palette($background, background);
    }

    &[darker-bg],
    &.darker-bg
    {
      background-color: mat.get-color-from-palette($background, background);
    }

    &[text],
    &.text
    {
      color: mat.get-color-from-palette($foreground, text);
    }
    &[primary],
    &.primary
    {
      color: mat.get-color-from-palette($primary, 500);
    }

    &[accent],
    &.accent
    {
      color: mat.get-color-from-palette($accent, 500);
    }

    &[warn],
    &.warn
    {
      color: mat.get-color-from-palette($warn, 500);
    }
  }
}

$iv-theme-primary:  mat.define-palette(mat.$indigo-palette);
$iv-theme-accent:   mat.define-palette(mat.$amber-palette);
$iv-theme-warn:     mat.define-palette(mat.$red-palette);

$iv-theme: mat.define-light-theme((
  color: (
    primary: $iv-theme-primary,
    accent: $iv-theme-accent,
    warn: $iv-theme-warn,
  )
));

@include mat.all-component-themes($iv-theme);
@include custom-cmp($iv-theme);

$iv-dark-theme-primary: mat.define-palette(mat.$blue-palette);
$iv-dark-theme-accent:  mat.define-palette(mat.$amber-palette, A200, A100, A400);
$iv-dark-theme-warn:    mat.define-palette(mat.$red-palette);

$iv-dark-theme:   mat.define-dark-theme((
  color: (
    primary: $iv-dark-theme-primary,
    accent: $iv-dark-theme-accent,
    warn: $iv-dark-theme-warn,
  )
));

/**
  * attribute has lower priority than class
  * by default, use attribute to set UI wide theme
  * use class for specific localised theme 
  */
[darktheme=true],
.darktheme.darktheme
{
  @include mat.all-component-themes($iv-dark-theme);
  @include custom-cmp($iv-dark-theme);
}

[darktheme=false],
.lighttheme.lighttheme
{
  @include mat.all-component-themes($iv-theme);
  @include custom-cmp($iv-theme);
}

.iav-dialog-class
{

  @media (min-width: 576px) { 
    
  }

  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) { 
    
    max-width: 50vw!important;
  }
  
  // Large devices (desktops, 992px and up)
  @media (min-width: 992px) { 
    
    max-width: 50vw!important;
  }
  
  // Extra large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { 
    
    max-width: 50vw!important;
  }
}

.col-xxl-2
{
  @media (min-width: 2000px) {
    max-width: 16.67%;
    flex: 0 0 16.67%;
  }
}