// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;

.active-users,
.active-users-opened {
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0 var(--sp-xs);
  border: none;
  border-radius: $br-8;
}

.active-users-list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 0;
  gap: var(--user-list-gap, 0);
}

%user-icon {
  @include t.use-typography("body-small");

  display: grid;
  place-content: center;
  height: $sz-24;
  width: $sz-24;
  border-radius: $br-circle;
  margin-inline-start: calc(-1 * var(--sp-xs));

  img {
    border-radius: $br-circle;
    border: $b-2 solid var(--user-count-foreground-color);
  }
}

.users-num {
  @extend %user-icon;

  background-color: var(--user-count-background-color);
  color: var(--user-count-foreground-color);
  z-index: 3; // FIXME: this is hardcoded because of the way its component uses z-index from cljs
  border: $b-2 solid var(--user-count-foreground-color);
  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
}

.session-icon {
  @extend %user-icon;

  margin-inline-start: var(--user-list-inline-margin, calc(-1 * var(--sp-xs)));
}

.active-users-opened {
  position: absolute;
  right: calc(-1 * var(--sp-xxs));
  top: calc(-1 * var(--sp-xxs));
  padding: var(--sp-s);
  margin: calc(-1 * var(--sp-xxs)) calc(-1 * var(--sp-xs)) 0 0;
  background-color: var(--menu-background-color);
  z-index: 4; // FIXME: this is hardcoded because of the way its component uses z-index from cljs

  --user-list-gap: var(--sp-xs);
  --user-list-inline-margin: 0;
}