@use 'sass:map';
@use '@finastra/fds-tokens/dist/scss/light';
@use '@finastra/fds-tokens/dist/scss/dark';
@use '@finastra/fds-theme/color' as color;

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@mixin theme($theme) {
  $fill-color: map.get(if(map.get($theme, is-dark), dark.$tokens, light.$tokens), surface);

  $prod-wave: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 320 246'%3E%3Cpath fill='#{$fill-color}' d='M320,0v218.3c-2.8,2.1-5.7,4.2-8.6,6.2c-57.1,39.1-132,15.1-180.5,3.3C114.2,223.8,65.3,206.1,0,194V0H320z'/%3E%3C/svg%3E";
  $prod-wave: str-replace($prod-wave, '#', '%23');

  $sol-wave-top: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132.389' height='72'%3E%3Cpath fill='#{$fill-color}' d='M0,0V72C39.485,41.253,86.3,19,132.389,0Z'/%3E%3C/svg%3E";
  $sol-wave-top: str-replace($sol-wave-top, '#', '%23');

  $sol-wave-bot: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100.288' height='72'%3E%3Cpath fill='#{$fill-color}' d='M320,240V168c-40.654,36.548-80.919,59.972-100.288,72Z' transform='translate(-219.712 -168)'/%3E%3C/svg%3E";
  $sol-wave-bot: str-replace($sol-wave-bot, '#', '%23');

  .uxg-card-product.mat-mdc-card {
    background: bottom left / 100% 120% no-repeat url($prod-wave), var(--fds-gradient-horizontal);
    @include color.color(on-surface);
  }

  .uxg-card-solution.mat-mdc-card {
    background: top left / 40% 30% no-repeat url($sol-wave-top), bottom right / 30% 30% no-repeat url($sol-wave-bot),
      top left / 100% 100% no-repeat linear-gradient(45deg, var(--fds-primary), var(--fds-secondary));
    @include color.color(on-gradient);
  }
}

@mixin typography($config) {
  .mat-mdc-card[dense] {
    .mat-mdc-card-title {
      font-size: 14px;
    }

    .mat-mdc-card-subtitle {
      font-size: 12px;
    }

    .mat-mdc-card-actions {
      font-size: 18px;
    }
  }
}