.status-widget {
  display: flex;
  align-items: center;

  a:before {
    display: none;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: #efefef;
    content: '';
  }

  &.none a:before {
    background: var(--success);
  }
  &.minor a:before {
    background: var(--warning);
  }
  &.major a:before {
    background: var(--warning-darker);
  }
  &.critical a:before {
    background: var(--danger);
  }

  @media (min-width: 450px) {
    a:before {
      display: inline-block;
    }
  }
}