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

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

.module-CallingSelectPresentingSourcesModal {
  &__width-container {
    max-width: 665px;
    position: relative;
  }

  // there's no module-class-name on the footer,
  // so we have to reference it using the generic selector
  .module-Modal__button-footer {
    background-color: variables.$color-gray-95;
  }

  &__sources {
    margin-bottom: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin-bottom: 12px;
  }

  &__source {
    @include mixins.button-reset();
    & {
      border-radius: 4px;
      border: 1px solid variables.$color-gray-60;
      overflow: hidden;
      padding: 8px;
      text-align: center;
      width: 200px;
    }

    &:focus {
      outline: none;
      @include mixins.keyboard-mode {
        @include mixins.axo-focus-ring;
      }
    }

    &--selected {
      background-color: variables.$color-ultramarine-dark;
      border: 1px solid variables.$color-ultramarine-dark;
    }

    img {
      display: inline-block;
    }
  }

  &__screenshot {
    max-height: 102px;
    max-width: 184px;
  }

  &__name {
    &--container {
      align-items: center;
      display: flex;
      margin-top: 8px;
    }

    &--text {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
      width: 100%;
    }

    &--icon {
      margin-inline-end: 8px;
    }
  }
}
