@use '../../styles/mixins/position';

.StatusBadge {
  --b-status-size: 0;
  --b-status-border-width: 0;
  --b-status-bg-color: initial;

  position: relative;
  z-index: var(--layer-z-index-base);

  box-sizing: content-box;
  width: var(--b-status-size);
  height: var(--b-status-size);

  background-color: var(--color-surface-high);
  border: var(--b-status-border-width) solid var(--color-surface-highest);
  border-radius: 50%;

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: var(--b-status-size);
    height: var(--b-status-size);

    background-color: var(--b-status-bg-color);
    border-radius: 50%;
  }

  &:where(.size-m) {
    --b-status-size: 8px;
    --b-status-border-width: 2px;
  }

  &:where(.size-l) {
    --b-status-size: 14px;
    --b-status-border-width: 3px;
  }
}

.Icon {
  @include position.absolute-center;

  z-index: var(--layer-z-index-floating);
}