@use '@angular/material' as mat;
@use '../../../sass/wds-brand/wds-theme/wds-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.m2-get-color-from-palette($color, default);

  //& {
  //  @include mat.overridable-elevation(2, mat.m2-get-color-from-palette($color, 900),)
  //}
  .alert-message {

    //box-shadow: 40px 0 $banner-shadow;
    //box-shadow: 40px 0 inset mat.m2-get-color-from-palette($color, 700),
    //$banner-shadow;
    background-color: mat.m2-get-color-from-palette($color, 50);
    box-shadow: 40px 0 $banner-shadow;
    border-radius: 14px;

    color: mat.m2-get-color-from-palette($color, default-contrast);
    @include mat.overridable-elevation(2, mat.m2-get-color-from-palette($color, 900));


    &:before {
      content: '';
      width: 46px;
      height: 100%;
      background-color: mat.m2-get-color-from-palette($color, 700);
      position: absolute;
      border-radius: 14px 0 0 14px;
    }
  }

  .wds-banner {
    color: mat.m2-get-color-from-palette($color, "100-contrast");

  }
}


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


  .wds-banner {
    display: block;
  }

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


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

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

  wds-banner.wds-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);
    //}
    //
    //.wds-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) {
  wds-banner {
    .alert-message {
      h2 {
      //@include mat.m2-typography-level($typography-config, headline-4)
      }

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

@mixin density($density-scale) {

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

  wds-banner {

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


@mixin theme($theme-config) {
  $color-config: mat.m2-get-color-config($theme-config);
  $typography-config: mat.m2-get-typography-config($theme-config);
  $density-config: mat.m2-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);
  }
}