1
/* This block of CSS code styles a header icon element */
2
.bpw-header-icon {
3
    /* Remove border */
4
    border: none;
5
    /* Remove background color */
6
    background: none;
7
    /* Remove padding */
8
    padding: 0;
9
    /* Remove margin */
10
    margin: 0;
11
    /* Set text color to a variable named shark */
12
    color: var(--shark);
13
    /* Set line-height to zero */
14
    line-height: 0;
15
    /* Set left margin to a variable named spacing-large */
16
    margin-left: var(--spacing-large);
17
    /* Align text to the right */
18
    text-align: right;
19
    /* Align element vertically in the middle */
20
    vertical-align: middle;
21
    /* Set cursor to a pointer */
22
    cursor: pointer;
23
    /* Set fill color to a variable named shark */
24
    fill: var(--shark);
25
    /* Set width to 16 pixels */
26
    width: 16px;
27
    /* Set height to 16 pixels */
28
    height: 16px;
29
    /* Set fill transition duration to 0.3 seconds */
30
    transition: fill 0.3s;
31
}
32

33
/* Apply the same fill color and fill transition to the icon's SVG and path elements */
34
.bpw-header-icon svg,
35
.bpw-header-icon svg path {
36
/* Set fill color to a variable named shark */
37
fill: var(--shark);
38
/* Set fill transition duration to 0.3 seconds */
39
transition: fill 0.3s;
40
}
41

42
/* When the icon is hovered over, change the fill color to a variable named reef for the icon, SVG and path elements */
43
.bpw-header-icon:hover,
44
.bpw-header-icon:hover svg,
45
.bpw-header-icon:hover svg path {
46
fill: var(--reef);
47
}

1
.bpw-header-title-flexbox {
2
    /* sets the overflow behavior of the element */
3
    overflow: hidden;
4
    /* sets the text overflow behavior of the element */
5
    text-overflow: ellipsis;
6
    /* sets the flexbox properties of the element for webkit browsers */
7
    -webkit-box-flex: 1;
8
    /* sets the flexbox properties of the element for Microsoft browsers */
9
    -ms-flex: 1 1 auto;
10
    /* sets the flexbox properties of the element */
11
    flex: 1 1 auto;
12
}
13

14
.bpw-header-title-container {
15
    /* sets the vertical alignment of the element */
16
    -webkit-box-align: center;
17
    -ms-flex-align: center;
18
    align-items: center;
19
    /* sets the display of the element to use flexbox for webkit browsers */
20
    display: -webkit-box;
21
    /* sets the display of the element to use flexbox for Microsoft browsers */
22
    display: -ms-flexbox;
23
    /* sets the display of the element to use flexbox */
24
    display: flex;
25
}
26

27
.bpw-header-title-container .bpw-bot-avatar {
28
    /* sets the display of the element to none */
29
    display: none;
30
}
31

32
.bpw-header-title-container .bpw-bot-avatar svg {
33
    /* sets the zoom level of the element */
34
    zoom: 0.6;
35
}
36

37
.bpw-header-name {
38
    /* sets the font weight of the element */
39
    font-weight: 500;
40
    /* sets the font size of the element */
41
    font-size: 14px;
42
    /* sets the color of the element */
43
    color: var(--zinc-600);
44
}
45

46
.bpw-header-subtitle {
47
    /* sets the overflow behavior of the element */
48
    overflow: hidden;
49
    /* sets the white space handling of the element */
50
    white-space: nowrap;
51
    /* sets the text overflow behavior of the element */
52
    text-overflow: ellipsis;
53
    /* sets the font weight of the element */
54
    font-weight: 300;
55
    /* sets the font size of the element */
56
    font-size: 12px;
57
    /* sets the color of the element */
58
    color: var(--zinc-400);
59
}
60

61
.bpw-header-unread {
62
    /* sets the display of the element to none */
63
    display: none;
64
}
65

66
.sr-only {
67
    /* sets the position of the element to absolute */
68
    position: absolute;
69
    /* sets the width of the element */
70
    width: 1px;
71
    /* sets the height of the element */
72
    height: 1px;
73
    /* sets the padding of the element */
74
    padding: 0;
75
    /* sets the margin of the element */
76
    margin: -1px;
77
    /* sets the overflow behavior of the element */
78
    overflow: hidden;
79
    /* clips the element to the given rectangle */
80
    clip: rect(0, 0, 0, 0);
81
    /* sets the border of the element */
82
    border: 0;
83
}

1
.bpw-header-container {
2
    /* sets the border radius of the element */
3
    border-radius: var(--spacing-large);
4
    /* sets the background color of the element */
5
    background: var(--white);
6
    /* sets the border of the element */
7
    border: 1px solid var(--zinc-200);
8
    /* sets the border radius of the element (repeated declaration) */
9
    border-radius: var(--spacing-medium);
10
    /* sets the padding of the element */
11
    padding: var(--spacing-large) var(--spacing-x-large);
12
}