@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/elevation';

@mixin el-2($is-dark: false) {
  @extend .gl-el-2;
  @if ($is-dark) {
    @extend .gl-dark-el-2;
  }
}

@mixin mx-table-search-theme($theme) {
  $is-dark: map.get($theme, is-dark);

  // Light Theme
  $color-theme: colors.$mx-light;
  @if $is-dark {
    // Dark Theme
    $color-theme: colors.$mx-dark;
  }
  $onSurface: map.get($color-theme, onSurface);

  .mx-table-search {
    &__search-bar {
      .input-decoration {
        color: $onSurface;
        background-color: rgba($onSurface, 0.04);
        border-bottom: 1px solid rgba($onSurface, 0.38);
      }
    }

    &__overlay {
      &--wrapper {
        @include el-2($is-dark);
        background-color: map.get($color-theme, surfaceContainer);
      }
    }

    &__filter-items {
      &--wrapper {
        .mat-icon {
          color: map.get($color-theme, onSurfaceVariant);
        }
      }
    }
  }
}