.participants-speaker-view {
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-rows: 0.5fr minmax(0, 5fr) 0.5fr;
  aspect-ratio: 16/9;
}

.participants-speaker-view__active-speaker {
  grid-area: 1 / 1 / 4 / 2;
}

.participants-speaker-view__only-speaker {
  grid-area: 1 / 1 / -1 / -1;
}

.participants-speaker-view__others-container {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  flex-direction: column;
}

.participants-speaker-view__others {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: 0;

  > .participant {
    min-height: calc(25% - 1rem);
    max-height: calc(25% - 1rem);
  }
}

.participants-speaker-view__button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  background: white;
}

.participants-speaker-view__button:disabled {
  cursor: auto;
}

.participants-speaker-view__previous-button {
  grid-area: 1 / 2 / 2 / 3;
}

.participants-speaker-view__next-button {
  grid-area: 3 / 2 / 4 / 3;
}

@mixin participants-speaker-view__button-icon {
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  height: 2rem;
  width: 2rem;
}

.participants-speaker-view__next-button-icon {
  @include participants-speaker-view__button-icon;
  background-image: url('../../../../assets/down-arrow.png');
}

.participants-speaker-view__previous-button-icon {
  @include participants-speaker-view__button-icon;
  background-image: url('../../../../assets/up-arrow.png');
}

.active-speaker__container {
  position: relative;
  width: 100%;
  height: 100%;
}

.active-speaker__participant {
  width: 100%;
  height: 100%;
  position: absolute;
}

.active-speaker__participant--hidden {
  opacity: 0;
}
