@use 'sass:map';
@use '@angular/material' as mat;
@use '@finastra/angular-theme' as fds;
@use '@finastra/fds-theme/color';
@use '@finastra/fds-theme/typography';

@mixin theme($theme) {
  .uxg-global-search-overlay-backdrop {
    background: fds.get-color-from-token(surface, 0.95, $theme);
  }

  .uxg-global-search-overlay {
    @include color.color(on-surface);

    .uxg-global-search-results-area {
      .uxg-global-search-result-group-header {
        .uxg-global-search-result-group-counter {
          opacity: 0.75;
        }
      }
    }

    .uxg-global-search-results-counter {
      opacity: 0.75;
    }

    .uxg-global-search-input-area {
      .uxg-global-search-input {
        .mat-mdc-form-field-focus-overlay {
          background: fds.get-color-from-token(surface, 0.1, $theme);
        }
        .mdc-text-field--filled:not(.mdc-text-field--disabled) {
          background: fds.get-color-from-token(surface, 0.1, $theme);
        }
        .mat-mdc-form-field-label {
          @include color.color(on-surface);
        }
      }
    }

    .uxg-global-search-close-overlay-button {
      opacity: 0.75;
      .mat-mdc-icon-button {
        @include color.color(on-surface);
        opacity: 0.75;
      }
    }
  }
}

@mixin typography($config: null) {
  uxg-global-search-overlay {
    .uxg-global-search-input-area {
      .uxg-global-search-input {
        @include typography.typography(headline-2);

        font-feature-settings: 'liga' 0, 'clig' 0;

        .mat-mdc-form-field-label {
          @include typography.typography(headline-2);

          @include fds.flex-breakpoint('xs') {
            @include typography.typography(headline-4);
          }
        }

        .mat-mdc-input-element {
          @include fds.flex-breakpoint('xs') {
            @include typography.typography(headline-4);
          }
        }
      }

      .uxg-global-search-icon {
        font-size: 60px;
        opacity: 0.75;

        @include fds.flex-breakpoint('xs') {
          font-size: var(--fds-headline-3-font-size);
        }
      }
    }

    .uxg-global-search-results-area {
      .uxg-global-search-result-group-header {
        .uxg-h4 {
          @include fds.flex-breakpoint('xs') {
            @include typography.typography(headline-5);
          }
        }

        .uxg-global-search-result-group-counter {
          @include fds.flex-breakpoint('xs') {
            @include typography.typography(subtitle-1);
          }
        }
      }
    }

    .uxg-global-search-results-filter {
      @include typography.typography(body-1);

      .uxg-h5 {
        @include fds.flex-breakpoint('xs') {
          @include typography.typography(headline-6);
        }
      }

      .mat-mdc-checkbox-label {
        @include fds.flex-breakpoint('xs') {
          @include typography.typography(body-2);
        }
      }
    }

    .uxg-global-search-results-counter {
      @include typography.typography(body-1);

      @include fds.flex-breakpoint('xs') {
        @include typography.typography(body-2);
      }
    }
  }
}