Desktop/stylesheets/components/Button.scss

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

@use 'sass:color';
@use '../mixins';
@use '../variables';

.module-Button {
  @include mixins.button-reset;
  & {
    border-radius: 4px;
    padding-block: 8px;
    padding-inline: 16px;
    text-align: center;
    -webkit-app-region: no-drag;
  }

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

  @include mixins.disabled {
    cursor: not-allowed;
  }

  &--large {
    @include mixins.font-title-2;
    font-weight: bold;
  }

  &--medium {
    @include mixins.font-body-1-bold;
  }

  &--small {
    @include mixins.font-body-2;
    @include mixins.rounded-corners;
    padding-block: 6px;
    padding-inline: 12px;
  }

  &--primary {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-accent);

    &:not([disabled]):active {
      background: var(--axo-color-fill-accent-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--secondary {
    background: var(--axo-color-fill-secondary);
    color: var(--axo-color-label-primary);

    &:not([disabled]):active {
      background: var(--axo-color-fill-secondary-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }

    &--affirmative {
      color: var(--axo-color-label-accent);

      &[disabled],
      &--discouraged {
        color: var(--axo-color-label-accent-disabled);
      }
    }

    &--destructive {
      color: var(--axo-color-label-destructive);

      &[disabled],
      &--discouraged {
        color: var(--axo-color-label-destructive-disabled);
      }
    }
  }

  &--destructive {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-destructive);

    &:not([disabled]):active {
      background: var(--axo-color-fill-destructive-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--calling {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-affirmative);

    &:not([disabled]):active {
      background: var(--axo-color-fill-affirmative-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--system-message {
    background: var(--axo-color-fill-primary);
    color: var(--axo-color-label-accent);
    @include mixins.rounded-corners;

    &:not(:disabled, &--discouraged) {
      &:active {
        background: var(--axo-color-fill-primary-pressed);
      }
    }

    &:disabled,
    &--discouraged {
      color: var(--axo-color-label-accent-disabled);
    }

    &.module-Button--small {
      padding-top: 5px;
      padding-bottom: 5px;
      font-weight: 500;
    }
  }

  &--details {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    justify-content: center;
    line-height: 10px;
    min-height: 44px;
    min-width: 68px;
    padding: 8px;

    background: var(--axo-color-fill-secondary);
    color: var(--axo-color-label-primary);

    &:not([disabled]):active {
      background: var(--axo-color-fill-secondary-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled);
    }

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

    &::before {
      margin-bottom: 6px;
    }
  }

  &--icon {
    @mixin button-icon($icon) {
      content: '';
      display: block;
      height: 18px;
      width: 18px;
      @include mixins.color-svg($icon, currentColor);
    }

    &--audio::before {
      @include button-icon('../images/icons/v3/phone/phone-compact.svg');
    }

    &--message::before {
      @include button-icon('../images/icons/v3/chat/chat-compact.svg');
    }

    &--muted::before {
      @include button-icon('../images/icons/v3/bell/bell-slash-compact.svg');
    }

    &--search::before {
      @include button-icon('../images/icons/v3/search/search-compact.svg');
    }

    &--unmuted::before {
      @include button-icon('../images/icons/v3/bell/bell-compact.svg');
    }

    &--video::before {
      @include button-icon('../images/icons/v3/video/video-compact.svg');
    }
  }
}