1
/* Style for the composer section */
2
.bpw-composer {
3
  padding: 0; /* Remove any padding */
4
  position: relative; /* Set the position to relative */
5
  outline: none; /* Remove any outline */
6
  border: none; /* Remove any border */
7
}
8

9
/* Style for the composer inner section */
10
.bpw-composer-inner {
11
  padding: 0; /* Remove any padding */
12
  line-height: 0; /* Remove any line-height */
13
  position: relative; /* Set the position to relative */
14

15
  /* Set the display property for different browsers */
16
  display: -webkit-box;
17
  display: -ms-flexbox;
18
  display: flex;
19

20
  justify-content: space-between; /* Align items to the start and end of the container */
21
}
22

23
/* Style for the composer textarea */
24
.bpw-composer-textarea {
25
  flex-grow: 2; /* Allow the textarea to grow to fill the available space */
26
}
27

28
/* Styles for the textarea element in the composer */
29
.bpw-composer textarea {
30
    /* Sets the background color to a variable named "--white" */
31
    background: var(--white);
32
    /* Sets the border to a 1-pixel solid line using a variable named "--zinc-200" */
33
    border: 1px solid var(--zinc-200);
34
    /* Sets the border radius to a variable named "--spacing-medium" to make the edges rounded */
35
    border-radius: var(--spacing-medium);
36
    /* Sets the text color to a variable named "--zinc-900" */
37
    color: var(--zinc-900);
38
    /* Inherits the font family from the parent element */
39
    font-family: inherit;
40
    /* Sets the font size to 12 pixels */
41
    font-size: 12px;
42
    /* Sets the height of the textarea to 54 pixels */
43
    height: 54px;
44
    /* Sets the padding on the top to 19 pixels, and on the right and left to a variable named "--spacing-large" */
45
    padding: 19px var(--spacing-large) var(--spacing-large);
46
    /* Disables the ability to resize the textarea */
47
    resize: none;
48
    /* Adds a 0.2-second transition effect to the border when the focus changes */
49
    transition: border 0.2s;
50
    /* Sets the width of the textarea to 100% */
51
    width: 100%;
52
    /* Sets the margin on the right side to a variable named "--spacing-small" */
53
    margin-right: var(--spacing-small);
54
}
55

56
/* Styles for the textarea element when it is in focus */
57
.bpw-composer textarea:focus {
58
    /* Changes the border color to a variable named "--zinc-300" */
59
    border-color: var(--zinc-300);
60
}
61

62
/* Styles for the textarea element when it is in right-to-left mode */
63
.bpw-composer.rtl .bpw-composer-inner textarea {
64
    /* Sets the text direction to right-to-left */
65
    direction: rtl;
66
}
67

68
/* Styles for the textarea element when it is in left-to-right mode */
69
.bpw-composer.ltr .bpw-composer-inner textarea {
70
    /* Sets the text direction to left-to-right */
71
    direction: ltr;
72
}
73

74
/* Styles for the quick reply dropdown menu */
75
.bpw-keyboard-quick_reply-dropdown {
76
    /* Sets a margin of 0.2rem on the top and bottom and 0.5rem on the right and left */
77
    margin: 0.2rem 0.5rem;
78
}
79

80
/* Styles for the send button when it is disabled */
81
.bpw-send-button:disabled,
82
.bpw-send-button:disabled:hover {
83
    /* Sets the opacity to 0.4 to make the button appear slightly transparent */
84
    opacity: 0.4;
85
    /* Sets the background color to a variable named "--theme-primary" */
86
    background-color: var(--theme-primary);
87
    /* Changes the cursor to the default cursor */
88
    cursor: default;
89
}
90

91
/* Styles for the container holding the send buttons */
92
.bpw-send-buttons {
93
    /* Sets the display mode to flex and the direction to horizontal */
94
    display: flex;
95
    flex-direction: row;
96
    /* Aligns the items to the center */
97
    align-items: center;
98
}
99
/* This is the CSS style for the button that sends a message */
100

101
.bpw-send-button {
102
    display: flex; /* Set the button to be arranged using flexible layout */
103
    justify-content: center; /* Center the button's content horizontally */
104
    align-items: center; /* Center the button's content vertically */
105
    border-radius: var(--spacing-medium); /* Make the corners of the button slightly rounded */
106
    background-color: var(--theme-primary); /* Give the button a primary color background */
107
    padding: 20px; /* Add some extra space around the button's content */
108
    width: 24px; /* Set the button's width to be 24 pixels */
109
    height: 24px; /* Set the button's height to be 24 pixels */
110
    color: transparent; /* Hide any text that might appear inside the button */
111
    cursor: pointer; /* Show the pointer cursor when the button is hovered over */
112
    background-image: url(./button.png) !important; /* Add an image to the button */
113
    background-repeat: no-repeat !important; /* Don't repeat the image */
114
    background-position: center !important; /* Center the image inside the button */
115
    transition: background-color 0.2s; /* Make the button's background color change smoothly over a short period of time */
116
}
117

118
/* This is the CSS style for the button that sends a message when it's not disabled and is being hovered over */
119

120
.bpw-send-button:not(:disabled):hover {
121
    background-color: var(--theme-primary-hover); /* Change the button's background color to a different color when it's being hovered over */
122
}
123

124
/* This is the CSS style for the voice recorder */
125

126
.bpw-voice-recorder {
127
    display: flex; /* Set the voice recorder to be arranged using flexible layout */
128
    flex-direction: row; /* Arrange the voice recorder's content horizontally */
129
    align-items: center; /* Center the voice recorder's content vertically */
130
}