@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity' as op;

@mixin mx-paginator-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;
  @if $is-dark == true {
    $color-theme: colors.$mx-dark;
  }

  $outline: map.get($color-theme, outline);
  $outline-opacity012: rgba($outline, 0.12);
  $onSurface: map.get($color-theme, onSurface);

  .mdc-text-field--outlined {
    background: transparent !important;

    &:not(.mdc-text-field--disabled) {
      background: transparent !important;
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-color: $outline;
      }
    }
  }

  .mdc-text-field--disabled {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-color: $outline-opacity012;
    }
  }

  .mat-mdc-paginator {
    @extend .gl-body-sm;
    color: $onSurface;
    background: transparent !important;
  }

  .mat-mdc-icon-button[disabled] {
    .mat-mdc-paginator-icon {
      fill: inherit;
    }
  }
}

.mat-mdc-button-disabled-interactive.mat-mdc-tooltip-disabled {
  pointer-events: none !important;
}