:host {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-base, 3px);
  font-size: var(--font-body-2-bold-font-size, 0.875rem);
  font-weight: var(--font-body-2-bold-font-weight, 700);
  line-height: var(--font-body-2-bold-line-height, calc(20 / 14));
  font-family: var(--font-body-2-bold-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  letter-spacing: var(--font-body-2-bold-letter-spacing, 0.005em);
  padding: 0.25rem 0.625rem;
  text-align: center;
  color: var(--color-palette-neutral-000, #ffffff);
  box-sizing: border-box;
}

:host(.is-undefined) {
  height: 1.5rem;
  width: 3.75rem;
  border: 1px solid var(--status-symbol-color-fill-off);
  background: var(--color-palette-grey-800, #3c3e42);
  box-shadow: var(--tag-shadow-inner-unknown, inset 0px 0px 5px 0px rgb(164, 171, 182));
}

:host([status=pass]) {
  height: 1.5rem;
  width: 3.75rem;
  border: 1px solid var(--status-symbol-color-fill-normal-on-dark, #56f000);
  background: var(--color-palette-green-900, #005a00);
  box-shadow: var(--tag-shadow-inner-pass, inset 0px 0px 5px 0px rgb(86, 240, 0));
}

:host([status=fail]) {
  height: 1.5rem;
  width: 3.75rem;
  border: 1px solid var(--status-symbol-color-fill-critical-on-dark, #ff3838);
  background: var(--color-palette-red-900, #661102);
  box-shadow: var(--tag-shadow-inner-fail, inset 0px 0px 5px 0px rgb(255, 56, 56));
}

:host([status=unknown]) {
  height: 1.5rem;
  width: 3.75rem;
  border: 1px solid var(--status-symbol-color-fill-off-on-dark, #a4abb6);
  background: var(--color-palette-grey-800, #3c3e42);
  box-shadow: var(--tag-shadow-inner-unknown, inset 0px 0px 5px 0px rgb(164, 171, 182));
}