@dialpad/dialtone-css/lib/build/less/components/presence.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: PRESENCE
//
//  These are presence classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/presence

.d-presence {
  --presence-color-border-base: var(--dt-color-surface-secondary);
  --presence-color-border-offline: var(--dt-presence-color-offline);
  --presence-color-background-active: var(--dt-presence-color-available);
  --presence-color-background-busy: var(--dt-presence-color-unavailable);
  --presence-color-background-away: var(--dt-presence-color-busy);
  --presence-color-background-offline: var(--dt-color-surface-primary);
  --presence-border-size: var(--dt-size-border-200);
  --presence-size: var(--dt-size-400);

  display: inline-block;
  box-sizing: border-box;
  border-color: var(--presence-color-border-base);
  border-style: solid;
  border-width: var(--presence-border-size);
  border-radius: var(--dt-size-radius-circle);

  .d-recipe-leftbar-row--selected & {
    --presence-color-border-base: var(--dt-color-surface-secondary);
  }

  .d-recipe-leftbar-row__primary:hover & {
    --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
  }

  &__inner {
    box-sizing: border-box;
    inline-size: var(--presence-size);
    block-size: var(--presence-size);
    border: none;
    border-radius: 50%;

    &--active {
      background-color: var(--presence-color-background-active);
    }

    &--busy {
      background-color: var(--presence-color-background-busy);
    }

    &--away {
      background-color: var(--presence-color-background-away);
    }

    &--offline {
      background-color: var(--presence-color-background-offline);
      border-color: var(--presence-color-border-offline);
      border-style: solid;
      border-width: var(--dt-size-border-200);
    }
  }
}