.application-status {
    height: 2rem; 
    width: 2rem; 
    min-width: 1rem; 
    border-radius: 9999px; 
    border-style: solid;
    border-width: 2px;
    padding: 4px;
}

.application-status > div {
    height: 100%; 
    width: 100%; 
    border-radius: 9999px;     
}

@keyframes successAnimation {
    from {background-color: transparent;}
    to {background-color: var(--mw-success)}
  }

@keyframes activeAnimation {
    from {background-color: transparent;}
    to {background-color: var(--mw-active)}
  }

@keyframes dangerAnimation {
    from {background-color: transparent;}
    to {background-color: var(--mw-danger)}
  }

@keyframes inactiveAnimation {
    from {background-color: transparent;}
    to {background-color: var(--mw-inactive)}
  }

.application-status.success {
    border-color: var(--mw-success);
}

.application-status.success > div {
    background-color: var(--mw-success);
    animation-name: successAnimation;
    animation-duration: 1s;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
}

.application-status.active {
    border-color: var(--mw-active);
    background-color: var(--mw-active-lighter);
}

.application-status.active > div {
    background-color: var(--mw-active);
    animation-name: activeAnimation;
    animation-duration: 1s;
    animation-direction: alternate-reverse;   
    animation-iteration-count: infinite; 
}

.application-status.warning {
    border-color: var(--mw-warning);
}

.application-status.warning > div {
    background-color: var(--mw-warning);
}

.application-status.danger {
    border-color: var(--mw-danger);
    background-color: var(--mw-danger-lighter);
}

.application-status.danger > div {
    background-color: var(--mw-danger);
    animation-name: dangerAnimation;
    animation-duration: 1s;
    animation-direction: alternate-reverse;   
    animation-iteration-count: infinite; 
}

.application-status.inactive {
    border-color: var(--mw-inactive);
    background-color: var(--mw-inctive-lighter);
}

.application-status.inactive > div {
    background-color: var(--mw-inactive);
}