signal-desktop/stylesheets/components/CallSettingsButton.scss

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

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

@mixin CallSettingsButton-icon($path) {
  @include mixins.color-svg($path, variables.$color-gray-15);
}

.CallSettingsButton__Button {
  align-items: center;
  background-color: variables.$color-gray-78;
  border: none;
  border-radius: 40px;
  display: flex;
  height: 36px;
  justify-content: center;
  outline: none;
  width: 36px;

  @include mixins.keyboard-mode {
    &:focus {
      outline-offset: 1px;
      outline: 2px solid variables.$color-ultramarine;
    }
  }
}

.CallSettingsButton__Icon {
  height: 20px;
  width: 20px;
  border: none;
}

.CallSettingsButton__Icon--Cancel {
  @include CallSettingsButton-icon('../images/icons/v3/x/x.svg');
}

.CallSettingsButton__Icon--SidebarView {
  @include CallSettingsButton-icon(
    '../images/icons/v3/sidebar_view/sidebar_view.svg'
  );
}

.CallSettingsButton__Icon--PaginatedView {
  @include CallSettingsButton-icon('../images/icons/v3/grid/grid.svg');
}

.CallSettingsButton__Icon--Pip {
  @include CallSettingsButton-icon('../images/icons/v3/pip/pip.svg');
}

.CallSettingsButton__Icon--Settings {
  @include CallSettingsButton-icon('../images/icons/v3/settings/settings.svg');
}

.CallSettingsButton__Icon--SpeakerView {
  @include CallSettingsButton-icon(
    '../images/icons/v3/speaker_view/speaker_view.svg'
  );
}