@import '~@angular/material/theming';
@import '~@angular/cdk/overlay-prebuilt.css';

@include  mat-core();

@mixin custom-cmp($theme) {

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

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

  [iv-custom-comp],
  .iv-custom-comp
  {

    &[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-color($background, background)
    }

    &[darker-bg],
    &.darker-bg
    {
      background-color: $background-color;
    }

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

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

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

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

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

@include angular-material-theme($iv-theme);
@include custom-cmp($iv-theme);

$iv-dark-theme-primary: mat-palette($mat-blue);
$iv-dark-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$iv-dark-theme-warn:    mat-palette($mat-red);
$iv-dark-theme:   mat-dark-theme($iv-dark-theme-primary, $iv-dark-theme-accent, $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 angular-material-theme($iv-dark-theme);
  @include custom-cmp($iv-dark-theme);
}

[darktheme=false],
.lighttheme.lighttheme
{
  @include angular-material-theme($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%;
  }
}