.a-status-indicator {
  --bg: var(--lens-semantic-color-accent-green-background);
  --color: var(--a-status-indicator-bg, var(--lens-semantic-color-accent-green-content));
  --radius: var(--lens-semantic-radius-full);
  --height: var(--lens-core-spacing-3);
  --px-start: var(--lens-semantic-spacing-desktop-padding-1-5);
  --px-end: var(--lens-semantic-spacing-desktop-padding-1-5);
  --py: var(--lens-semantic-spacing-desktop-padding-0-25);
  --gap: var(--lens-semantic-spacing-desktop-gap-0-5);
  --icon-size: var(--lens-semantic-icon-size-md);
  --shape-size: var(--lens-core-spacing-2);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  background: var(--a-status-indicator-bg, var(--bg));
  color: var(--a-status-indicator-color, var(--color));
  padding-inline-start: var(--a-status-indicator-padding-start, var(--px-start));
  padding-inline-end: var(--a-status-indicator-padding-end, var(--px-end));
  padding-block: var(--a-status-indicator-padding-y, var(--py));
  border-radius: var(--a-status-indicator-radius, var(--radius));
  gap: var(--a-status-indicator-gap, var(--gap));
  height: var(--a-status-indicator-height, var(--height));
  user-select: none;
  -webkit-user-select: none;
  transition-property: background, color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &.a-status-indicator--warning {
    --bg: var(--lens-semantic-color-accent-yellow-background);
    --color: var(--lens-semantic-color-accent-yellow-content);
  }
  &.a-status-indicator--error {
    --bg: var(--lens-semantic-color-accent-red-background);
    --color: var(--lens-semantic-color-accent-red-content);
  }
  &.a-status-indicator--notification {
    --bg: var(--lens-semantic-color-accent-blue-background);
    --color: var(--lens-semantic-color-accent-blue-content);
  }
  &.a-status-indicator--generic {
    --bg: var(--lens-semantic-color-accent-gray-background);
    --color: var(--lens-semantic-color-accent-gray-content);
  }
  &.a-status-indicator--subtle {
    --bg: transparent;
    --color: var(--lens-semantic-color-type-muted);
  }
  &.a-status-indicator--emphasis {
    --bg: var(--lens-semantic-color-accent-purple-background);
    --color: var(--lens-semantic-color-accent-purple-content);
  }
  &:has(.a-status-indicator-icon + .a-status-indicator-label) {
    --px-start: var(--lens-semantic-spacing-desktop-padding-0-5);
  }
  &:has(.a-status-indicator-icon):not(:has(.a-status-indicator-label)) {
    --px-start: var(--lens-semantic-spacing-desktop-padding-0-25);
    --px-end: var(--lens-semantic-spacing-desktop-padding-0-25);
  }
  &.a-status-indicator--shape-only {
    background: none;
    border-radius: 0;
    padding: 0;
    --height: auto;
    --gap: var(--lens-semantic-spacing-desktop-gap-1);
    &::before {
      content: "";
      display: inline-block;
      box-sizing: border-box;
      width: var(--a-status-indicator-shape-size, var(--shape-size));
      height: var(--a-status-indicator-shape-size, var(--shape-size));
      border-radius: var(--lens-semantic-radius-full);
      background: var(--a-status-indicator-bg, var(--bg));
    }
    &.a-status-indicator--subtle::before {
      border: var(--lens-semantic-border-width-thin) var(--lens-core-border-style-solid)
        var(--lens-semantic-color-outline-default);
    }
    & .a-status-indicator-label {
      color: var(--lens-semantic-color-type-default);
      --font-weight: var(
        --a-status-indicator-label-font-weight,
        var(--lens-semantic-font-label-sm-font-weight)
      );
    }
  }
}

.a-status-indicator-label {
  --font-size: var(
    --a-status-indicator-label-font-size,
    var(--lens-semantic-font-label-sm-font-size)
  );
  --line-height: var(
    --a-status-indicator-label-line-height,
    var(--lens-semantic-font-label-sm-line-height)
  );
  --letter-spacing: var(
    --a-status-indicator-label-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --font-weight: var(
    --a-status-indicator-label-font-weight,
    var(--lens-semantic-font-weight-label-emphasis)
  );
  color: var(--a-status-indicator-color, var(--color));
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
}

.a-status-indicator-label {
  color: var(--a-status-indicator-color, var(--color));
}

.a-status-indicator-icon {
  color: var(--a-status-indicator-color, var(--color));
  width: var(--a-status-indicator-icon-size, var(--icon-size));
  height: var(--a-status-indicator-icon-size, var(--icon-size));
  &:is(svg) {
    fill: currentColor;
  }
}