@use 'sass:map';
@use 'variables' as *;

@mixin theme() {
  xui-status {
    display: inline-flex;
    width: 12px;

    svg {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .x-status {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;

    &-online {
      background-color: map.get($colors, online);
    }

    &-idle {
      background-color: map.get($colors, idle);
      clip-path: url(#x-status-idle-clip-path);
    }

    &-dnd {
      background-color: map.get($colors, dnd);
      clip-path: url(#x-status-dnd-clip-path);
    }

    &-offline {
      background-color: map.get($colors, offline);
      clip-path: url(#x-status-offline-clip-path);
    }
  }
}