.participants-screen-share-view {
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-rows: 0.5fr minmax(0, 5fr) 0.5fr;
}

.participants-screen-share-view__current-share {
  grid-area: 1 / 1 / 4 / 2;
}

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

.participants-screen-share-view__button:disabled {
  cursor: auto;
}

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

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

.participants-screen-share-view__participants-container {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  flex-direction: column;
}
.participants-screen-share-view__participants {
  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);
  }
}

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

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

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