signal-desktop/stylesheets/components/CallingButton.scss

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

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

.CallingButton {
  @mixin icon($path) {
    @include mixins.color-svg($path, variables.$color-white);
    height: 20px;
    width: 20px;
    border: none;
  }

  &__icon {
    align-items: center;
    border-radius: 40px;
    border: none;
    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;
      }
    }

    @mixin calling-button-icon($icon, $background-color, $icon-color) {
      background-color: $background-color;

      div {
        @include mixins.color-svg($icon, $icon-color);
        & {
          height: 20px;
          width: 20px;
        }
      }
    }

    @mixin calling-button-icon-highlighted($icon) {
      @include calling-button-icon(
        $icon,
        variables.$color-gray-15,
        variables.$color-gray-90
      );
    }

    @mixin calling-button-icon-regular($icon) {
      @include calling-button-icon(
        $icon,
        variables.$color-gray-60,
        variables.$color-gray-15
      );
      & {
        backdrop-filter: blur(10px);
      }
    }

    @mixin calling-button-icon-disabled($icon) {
      @include calling-button-icon(
        $icon,
        variables.$color-gray-60,
        variables.$color-gray-15
      );
      & {
        opacity: 0.4;
      }
    }

    &--audio {
      $icon: '../images/icons/v3/mic/mic-slash-fill-light.svg';
      &--on {
        @include calling-button-icon-regular(
          '../images/icons/v3/mic/mic-fill-light.svg'
        );
      }
      &--off {
        @include calling-button-icon-highlighted($icon);
      }
      &--disabled {
        @include calling-button-icon-disabled($icon);
      }
    }

    &--video {
      $icon: '../images/icons/v3/video/video-slash-fill-light.svg';
      &--on {
        @include calling-button-icon-regular(
          '../images/icons/v3/video/video-fill-light.svg'
        );
      }
      &--off {
        @include calling-button-icon-highlighted($icon);
      }
      &--disabled {
        @include calling-button-icon-disabled($icon);
      }
    }

    &--hangup {
      @include calling-button-icon(
        '../images/icons/v3/phone/phone-down-fill-light.svg',
        variables.$color-accent-red,
        variables.$color-white
      );
    }

    &--raise-hand {
      $icon: '../images/icons/v3/raise_hand/raise_hand-fill-light.svg';
      &--on {
        @include calling-button-icon-highlighted($icon);
      }
      &--off {
        @include calling-button-icon-regular($icon);
      }
    }

    &--react {
      $icon: '../images/icons/v3/heart/heart-plus-fill.svg';
      &--on {
        @include calling-button-icon-highlighted($icon);
      }
      &--off {
        @include calling-button-icon-regular($icon);
      }
    }

    &--ring {
      $icon: '../images/icons/v3/bell/bell-slash-fill.svg';
      &--on {
        @include calling-button-icon-regular(
          '../images/icons/v3/bell/bell-ring-fill-light.svg'
        );
      }
      &--off {
        @include calling-button-icon-highlighted($icon);
      }
      &--disabled {
        @include calling-button-icon-disabled($icon);
      }
    }

    &--presenting {
      $icon: '../images/icons/v3/share_screen/share_screen-fill-light.svg';
      &--on {
        @include calling-button-icon-highlighted($icon);
      }
      &--off {
        @include calling-button-icon-regular($icon);
      }
      &--disabled {
        @include calling-button-icon-disabled($icon);
      }
    }

    &--more-options {
      @include calling-button-icon-regular('../images/icons/v3/more/more.svg');
    }
  }

  &__button-container {
    display: inline-flex;
    flex-direction: column;
    max-width: 64px;
    margin-inline: 10px;

    transition:
      margin-inline-start 0.3s ease-out,
      opacity 0.3s ease-out;
    @media (prefers-reduced-motion) {
      transition: none;
    }

    &--hidden {
      margin-inline-start: -100px;
      opacity: 0;
      pointer-events: none;

      // The container could be wider than 100px depending on the label. Hiding the label
      //  ensures that the above `margin-left` will completely hide the button.
      .CallingButton__label {
        display: none;
      }
    }
  }

  &__tooltip {
    background-color: variables.$color-gray-80;
    color: variables.$color-gray-15;
    font-size: 13px;
    outline: 1px solid variables.$color-gray-62;
    padding-block: 5px;
    padding-inline: 12px;
    filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
    pointer-events: none;
  }

  &__tooltip .module-tooltip-arrow::before {
    position: absolute;
    content: '';
    border-style: solid;
    border-width: 7px;
  }

  &__tooltip[data-placement='bottom'] .module-tooltip-arrow::before {
    border-color: transparent transparent variables.$color-gray-62 transparent;
    margin-top: -14px;
    /* stylelint-disable-next-line liberty/use-logical-spec */
    margin-left: -7px;
  }

  &__tooltip[data-placement='bottom'] .module-tooltip-arrow::after {
    border-bottom-color: variables.$color-gray-80 !important;
  }

  &__tooltip[data-placement='top'] .module-tooltip-arrow::before {
    border-color: variables.$color-gray-62 transparent transparent transparent;
    margin-top: 0;
    /* stylelint-disable-next-line liberty/use-logical-spec */
    margin-left: -7px;
  }

  &__tooltip[data-placement='top'] .module-tooltip-arrow::after {
    border-top-color: variables.$color-gray-80 !important;
  }
}