@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include compatMixins.sky-default-overrides('.sky-status-indicator') {
  --sky-override-status-indicator-icon-color-danger: #{$sky-highlight-color-danger};
  --sky-override-status-indicator-icon-color-info: #{$sky-highlight-color-info};
  --sky-override-status-indicator-icon-color-success: #{$sky-highlight-color-success};
  --sky-override-status-indicator-icon-color-warning: #{$sky-highlight-color-warning};
  --sky-override-status-indicator-icon-padding-right: #{$sky-space-xs};
  --sky-override-status-indicator-modern-default-display: none;
}

@include compatMixins.sky-modern-overrides(
  '.sky-status-indicator',
  true,
  true
) {
  --sky-override-status-indicator-icon-default-display: none;
}

@include compatMixins.sky-modern-overrides('.sky-status-indicator') {
  --sky-override-status-indicator-info-exclamation-path-color: var(
    --modern-color-gray-105
  );
}

.sky-status-indicator {
  align-items: baseline;
  display: flex;
}

.sky-status-indicator-icon {
  flex-shrink: 1;
  padding-right: var(
    --sky-override-status-indicator-icon-padding-right,
    var(--sky-space-gap-icon-s)
  );
}

.sky-status-indicator-icon-default {
  display: var(--sky-override-status-indicator-icon-default-display);
}

.sky-status-indicator-icon-modern {
  display: var(--sky-override-status-indicator-modern-default-display, inline);
}

.sky-status-indicator-icon-info {
  color: var(
    --sky-override-status-indicator-icon-color-info,
    var(--sky-color-icon-info)
  );
}

.sky-status-indicator-icon-success {
  color: var(
    --sky-override-status-indicator-icon-color-success,
    var(--sky-color-icon-success)
  );
}

.sky-status-indicator-icon-warning {
  color: var(
    --sky-override-status-indicator-icon-color-warning,
    var(--sky-color-icon-warning)
  );
}

.sky-status-indicator-icon-danger {
  color: var(
    --sky-override-status-indicator-icon-color-danger,
    var(--sky-color-icon-danger)
  );
}

.sky-status-indicator-icon {
  &.sky-status-indicator-icon-warning,
  &.sky-status-indicator-icon-success {
    --sky-icon-stack-top-icon-color-override: var(--sky-color-icon-default);
  }
  &.sky-status-indicator-icon-danger {
    --sky-icon-stack-top-icon-color-override: var(--sky-color-icon-inverse);
  }

  &.sky-status-indicator-icon-info {
    --sky-icon-stack-top-icon-color-override: var(
      --sky-override-status-indicator-info-exclamation-path-color,
      var(--sky-color-icon-inverse)
    );
  }
}
