// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.CallingStatusIndicator {
  @include mixins.font-body-2-medium;
  $size: 28px;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: $size;
  min-width: $size;
  padding: 6px;
  z-index: variables.$z-index-base;
  border-radius: 40px;
  background: rgba(variables.$color-gray-80, 0.7);
}

.CallingStatusIndicator--HandRaised {
  background: variables.$color-white;
}

.CallingStatusIndicator--HandRaised.CallingStatusIndicator--NextHandRaised {
  background: variables.$color-next-raised-hand;
}

.module-ongoing-call__local-preview .CallingStatusIndicator {
  position: absolute;
  z-index: variables.$z-index-base;
}

.module-ongoing-call__local-preview .CallingStatusIndicator--NoVideo {
  top: 8px;
  inset-inline-start: 8px;
}

.module-ongoing-call__local-preview .CallingStatusIndicator--HandRaised {
  bottom: 8px;
  inset-inline-start: 8px;
}

.module-ongoing-call__participants__grid
  .module-ongoing-call__group-call-remote-participant--hand-raised
  .CallingStatusIndicator--HandRaised {
  margin-block: 1px;
  margin-inline-start: 5px;
}

.CallingStatusIndicator--HandRaised:has(
  .CallingStatusIndicator--HandRaisedOrder
) {
  padding-inline: 8px;
}

.module-ongoing-call__participants__grid
  .module-ongoing-call__group-call-remote-participant--hand-raised
  .CallingStatusIndicator--HandRaised,
.module-ongoing-call__group-call-remote-participant:hover
  .CallingStatusIndicator--HandRaised {
  padding-inline-end: 6px;
}

.CallingRaisedHandsList
  .CallingStatusIndicator--HandRaised:not(
    .CallingStatusIndicator--NextHandRaised
  ) {
  background: variables.$color-gray-02;
  color: variables.$color-black-alpha-85;
}

.CallingStatusIndicator--HandRaisedOrder {
  margin-inline-end: 4px;
}

.module-ongoing-call__participants__grid
  .module-ongoing-call__group-call-remote-participant--hand-raised
  .CallingStatusIndicator--HandRaisedOrder {
  margin-inline-end: 2px;
}
