@use '@angular/material' as mat;
@use '@material/density';
@use '../../../sass/wdk-brand/wdk-theme/wdk-palette' as palette;
$banner-shadow: 0 3px 6px 0 rgba(0,0,0,.23), 0 3px 6px 0 rgba(0,0,0,.16);

@mixin _apply-banner-color($color) {
  background-color: mat.get-color-from-palette($color, default),;

  & {
    @include mat.overridable-elevation(2, mat.get-color-from-palette($color, 900),)
  }
  .alert-message {
    box-shadow: 40px 0 inset mat.get-color-from-palette($color, 700),
    $banner-shadow;
    color: mat.get-color-from-palette($color, default-contrast);
  }

  .wdk-banner {
    background-color: mat.get-color-from-palette($color, 50);
    color: mat.get-color-from-palette($color, "100-contrast");
  }
}


@mixin color($color-config) {
  $primary-color: mat.get-color-from-palette($color-config, primary);
  $accent-color: mat.get-color-from-palette($color-config, accent);
  //$success-palette: mat.define-palette(mat.$green-palette);


  .wdk-banner {
    display: block;
  }

  wdk-banner.wdk-success-banner {
    @include _apply-banner-color(palette.$success-palette);
  }


  wdk-banner.wdk-error-banner {
    @include _apply-banner-color($primary-color);
  }

  wdk-banner.wdk-warning-banner {
    @include _apply-banner-color(palette.$warning-palette);
  }

  wdk-banner.wdk-info-banner {
    @include _apply-banner-color(palette.$info-palette);
    //.alert-message {
    //  box-shadow: 40px 0 inset
    //  mat.get-color-from-palette($accent-color, default),
    //  $banner-shadow;
    //  color: mat.get-color-from-palette($accent-color, default-contrast);
    //}
    //
    //.wdk-banner {
    //  background-color: mat.get-color-from-palette($accent-color, 100);
    //  color: mat.get-color-from-palette($accent-color, "100-contrast");
    //}
  }
}

@mixin typography($typography-config) {
  wdk-banner {
    .alert-message {
      h2 {
      @include mat.typography-level($typography-config, headline-4)
      }

      a, .alert-message__body-text {
        @include mat.typography-level($typography-config, body-1)
      }
    }
  }
}

@mixin density($density-scale) {

  $density-config: (
    height: (
      default: 150px,
      minimum: 90px,
      maximum: 200px
    )
  );

  wdk-banner {

    .alert-message {
      //height: density.prop-value($density-config, $density-scale, height);
    }
  }
}


@mixin theme($theme-config) {
  $color-config: mat.get-color-config($theme-config);
  $typography-config: mat.get-typography-config($theme-config);
  $density-config: mat.get-density-config($theme-config);

  @if $color-config != null {
    @include color($color-config);
  }

  @if $typography-config != null {
    @include typography($typography-config);
  }

  @if $density-config != null {
    @include density($density-config);
  }
}