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

.pgh-mat {
  @mixin pgh-drop-file-container($color) {
    $colors: (
      primary: configs.$app-primary,
      accent: configs.$app-accent,
      warn: configs.$app-danger,
    );
    $theme-color: map.get($colors, $color);
    &.pgh-drop-file-#{$color} {
      /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
      border-color: rgba(mat.m2-get-color-from-palette($theme-color, 600), 0.4);
      /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
      background-color: rgba(mat.m2-get-color-from-palette($theme-color, 600), 0.03);
      color: var(--#{$color});

      &:hover {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
        border-color: rgba(mat.m2-get-color-from-palette($theme-color, 600), 0.8);
      }
    }
  }

  .pgh-drop-file-container {
    @include pgh-drop-file-container(primary);
    @include pgh-drop-file-container(accent);
    @include pgh-drop-file-container(warn);
  }
}