@use '../abstract' as *;

.status {
  --p-status-color: var(--color-neutral-50);

  display: flex;
  align-items: baseline;
  gap: pxToRem(8);
  user-select: none;
  &-icon {
    inline-size:pxToRem(12); block-size:pxToRem(12); border-radius:var(--border-radius-circular);
    background-color:hsl(var(--p-status-color));
  }

  /* Status */
  &.is-offline    { --p-status-color:var(--color-neutral-50);     }
  &.is-waiting    { --p-status-color:var(--color-warning-50);     }
  &.is-pending    { --p-status-color:var(--color-warning-100);    }
  &.is-failed     { --p-status-color:var(--color-danger-100);     }
  &.is-complete   { --p-status-color:var(--color-success-100);    }
  &.is-processing { --p-status-color:var(--color-information-100);}
}