:root {
  --toolbar-btn-color: var(--white);
  --online-users-border-color: var(--bg-dark-primary);
  --online-users-text-color: var(--content-primary);
  --online-users-overflow-button-background-color: var(--bg-light-secondary);
}

@include theme('light') {
  --toolbar-btn-color: var(--neutral-70);
  --online-users-border-color: var(--bg-light-primary);
  --online-users-text-color: var(--content-primary);
  --online-users-overflow-button-background-color: var(--bg-light-secondary);
}

.online-users {
  display: flex;
  align-items: center;

  .online-user {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: var(--spacing-04);
    text-align: center;
    color: white;
    text-transform: uppercase;
    border-radius: var(--border-radius-base);
    cursor: pointer;
  }

  .online-user-multi {
    @include reset-button;

    color: var(--toolbar-btn-color);
    width: auto;
    min-width: 24px;
    padding-left: var(--spacing-04);
    padding-right: var(--spacing-03);
    display: flex;
    align-items: center;
  }
}

.online-users-row {
  // Keep in sync with the MAX_USER_CIRCLES_DISPLAYED js constant
  $max-user-circles-displayed: 5;

  --online-users-circle-size: 24px;
  --online-users-border-size: 1px;
  --online-users-overlap: 8px;
  --online-users-circle-padding: var(--spacing-01);

  .online-user-overflow-dropdown {
    --online-users-border-color: transparent;
  }

  display: flex;
  align-items: center;
  color: var(--online-users-text-color);

  .online-users-row-button {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--online-users-text-color);
    min-width: var(--online-users-circle-size);
    height: var(--online-users-circle-size);
    display: block;
    font-weight: var(--font-weight-regular);

    &.dropdown-toggle::after {
      display: none;
    }

    &:not(:last-child, .online-user-overflow-toggle) {
      margin-right: calc(
        var(--online-users-overlap) * -1 + var(--online-users-border-size)
      );
    }

    @for $i from 1 through $max-user-circles-displayed {
      &:nth-child(#{$i}):not(:hover):not(.online-user-overflow-toggle) {
        z-index: $i;
      }
    }

    &:hover {
      z-index: $max-user-circles-displayed + 2;
    }
  }

  .online-user-overflow-toggle {
    &:not(:hover) {
      z-index: $max-user-circles-displayed + 1;
    }

    &:hover,
    &:active,
    & {
      background: none;
    }

    .online-user-circle {
      background-color: var(--online-users-overflow-button-background-color);
      color: var(--online-users-text-color);
    }
  }

  .online-user-circle {
    padding: var(--online-users-circle-padding);
    border-radius: 50%;
    min-width: var(--online-users-circle-size);
    height: var(--online-users-circle-size);
    line-height: calc(
      var(--online-users-circle-size) - 2 * var(--online-users-border-size) -
        2 * var(--online-users-circle-padding)
    );
    font-size: var(--font-size-01);
    text-align: center;
    border: var(--online-users-border-size) solid
      var(--online-users-border-color);
    box-sizing: border-box;
    display: inline-block;
  }

  .online-user-circle-light-font {
    color: var(--content-primary-dark);
  }

  .online-user-circle-dark-font {
    color: var(--content-primary);
  }
}