signal-desktop/stylesheets/components/ContactPill.scss

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

.module-ContactPill {
  align-items: center;
  display: inline-flex;
  user-select: none;
  overflow: hidden;
  padding-block: 4px;
  padding-inline: 8px;
  border-radius: 6px;

  @include light-theme {
    background: $color-black-alpha-08;
    color: $color-gray-90;
  }
  @include dark-theme {
    background: $color-white-alpha-12;
    color: $color-gray-05;
  }

  @include keyboard-mode {
    &:focus-within {
      @include light-theme {
        background: $color-gray-45;
        color: $color-white;
      }

      @include dark-theme {
        background: $color-gray-25;
        color: $color-gray-90;
      }
    }
  }

  &__contact-name {
    @include font-body-2;
    padding-block: 0;
    padding-inline: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  &__remove {
    $icon: '../images/icons/v3/x/x-compact-light.svg';

    @include button-reset;
    height: 100%;
    display: flex;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center;
    padding: 0;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      display: block;

      @include light-theme {
        @include color-svg($icon, $color-gray-60);
      }
      @include dark-theme {
        @include color-svg($icon, $color-gray-25);
      }
    }

    @include keyboard-mode {
      &:focus {
        &::before {
          @include color-svg($icon, $color-white);
        }
      }
    }
    @include dark-keyboard-mode {
      &:focus {
        &::before {
          @include color-svg($icon, $color-gray-90);
        }
      }
    }
  }
}