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

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

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

  .mx-infotip {
    &--info {
      background-color: map.get($current-theme, infoContainer);
      color: map.get($current-theme, onInfoContainer);
      border-left: 4px solid map.get($current-theme, infoVivid);
    }

    &--warning {
      background-color: map.get($current-theme, warningContainer);
      color: map.get($current-theme, onWarningContainer);
      border-left: 4px solid map.get($current-theme, warningVivid);
    }

    &--error {
      background-color: map.get($current-theme, errorContainer);
      color: map.get($current-theme, onErrorContainer);
      border-left: 4px solid map.get($current-theme, errorVivid);
    }

    &--success {
      background-color: map.get($current-theme, successContainer);
      color: map.get($current-theme, onSuccessContainer);
      border-left: 4px solid map.get($current-theme, successVivid);
    }
  }
}