maintainermonth/components/chip/chip.scss at 82641dfba02f80a0aef7b354e4109f5a18c94cce · github/maintainermonth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.chip {
  padding: spacing(1) spacing(1.5);
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  background-color: $white;
  @extend %subtitle-1;
  color: $purple;

  border-radius: 27px;
  cursor: default;

  &[data-location] {
    background-color: #2b5797;
    color: white;
  }

  &[data-spoken-language] {
    background-color: #9C27B0; // Rich purple for language indicator
    color: white;
  }

  &__icon {
    height: 18px;
    width: 18px;
    flex-shrink: 0;

    svg {
      height: 100%;
      width: 100%;
    }

    path {
      fill: $purple;
    }
  }

  &.custom-color {
    color: $white;

    path {
      fill: $white;
    }
  }
}