signal-desktop/stylesheets/components/SignalConnectionsModal.scss

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

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

.SignalConnectionsModal {
  padding-inline: 8px;
  padding-block-end: 20px;

  @include mixins.dark-theme {
    color: variables.$color-gray-05;
  }

  &__icon {
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/connections/connections-display.svg',
        variables.$color-gray-90
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/connections/connections-display.svg',
        variables.$color-gray-25
      );
    }
    & {
      display: block;
      height: 48px;
      margin-block: 0;
      margin-inline: auto;
      margin-bottom: 24px;
      width: 48px;
    }
  }

  &__list {
    margin-block: 20px;
    margin-inline: 0;
    padding-inline-start: 12px;

    li {
      display: flex;
      gap: 12px;
      align-items: center;

      list-style: none;
      margin-block: 16px;
      margin-inline: 0;
    }

    li::before {
      display: block;
      content: '';
      width: 4px;
      height: 14px;
      border-radius: 6px;

      @include mixins.light-theme {
        background-color: variables.$color-gray-20;
      }
      @include mixins.dark-theme {
        background-color: variables.$color-gray-25;
      }
    }
  }

  &__button {
    display: flex;
    justify-content: center;
    margin-top: 24px;

    button {
      min-width: 150px;
    }
  }
}