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

@mixin mx-expander-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;
  }

  .mx-expander-item-xs,
  .mx-expander-item-sm {
    .mx-expander-item-header {
      @extend .gl-label-sm;
    }
  }

  .mx-expander-item-md {
    .mx-expander-item-header {
      @extend .gl-label-md;
    }
  }

  .mx-expander-item-lg {
    .mx-expander-item-header {
      @extend .gl-label-lg;
    }
  }

  .mx-expander-item {
    &-header {
      color: map.get($current-theme, onSurface);
      .mat-icon {
        color: map.get($current-theme, onSurfaceVariant);
      }
    }

    &-body {
      &::before {
        background-color: map.get($current-theme, surfaceContainerHighest);
      }
    }

    &-disabled {
      .mx-expander-item-header {
        color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);
        .mat-icon {
          color: rgba(map.get($current-theme, onSurfaceVariant), opacity.$opacity-38);
        }
      }
    }
  }
}