/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

#chatTabPanel {
  --imbox-selected-text-color: FieldText;
  --imbox-selected-background-color: Field;
  --imgroup-selected-background-color: ThreeDLightShadow;
  overflow: hidden;
}

:root[lwt-tree-brighttext] #chatTabPanel {
  --imbox-selected-text-color: #f9f9fa;
  --imbox-selected-background-color: #18181a;
}

.im-placeholder-screen {
  color: FieldText;
  background-color: Field;
  overflow: auto;
  font-size: 15px;
  font-weight: normal;
}

:root[lwt-tree-brighttext] .im-placeholder-screen {
  color: var(--sidebar-text-color);
  background-color: var(--sidebar-background-color);
}

.im-placeholder-box {
  max-width: calc(500px + 9em);
  min-height: 3em;
  background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
  -moz-context-properties: fill;
  fill: currentColor;
  background-size: 3em;
  margin-right: .5em;
  margin-left: .5em;
  padding-right: 4.5em;
  padding-left: 4.5em;
}

.im-placeholder-innerbox {
  opacity: .8;
}

.im-placeholder-title {
  font-size: 2em;
  font-weight: lighter;
  line-height: 1.2;
  margin: 0;
  margin-bottom: .5em;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--splitter-color);
}

.im-placeholder-desc {
  margin-right: 0;
  margin-left: 0;
}

#noPreviousConvDesc {
  margin-top: 0;
  margin-bottom: 0;
}

.im-placeholder-button-box > button {
  appearance: none;
  /* override forms.css */
  font: inherit;
  min-height: 30px;
  color: inherit;
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
}

.im-placeholder-button-box > button:hover {
  background-color: var(--button-hover-background-color);
}

.im-placeholder-button-box > button:hover:active {
  background-color: var(--button-active-background-color);
}

.im-placeholder-button-box > button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.im-placeholder-button-box > button > .button-box {
  padding-inline: 10px;
}

#listPaneBox {
  border-inline-end: 1px solid var(--splitter-color);
}

:root[lwt-tree] #listPaneBox {
  appearance: none;
  background-color: var(--sidebar-background-color);
  border-inline-end-color: var(--sidebar-border-color);
  color: var(--sidebar-text-color);
}

:root[lwt-tree-brighttext] #listPaneBox {
  border-inline-end-color: var(--sidebar-border-color);
}

#contactlistbox {
  color: inherit;
  margin: 0;
  /* make it possible to let the children overwrite the end border.
     margin-inline-start because of the inverted direction */
  margin-inline-start: -1px;
  contain: size;
}

/* move the scrollbar to the left */
#contactlistbox:-moz-locale-dir(ltr),
#contactlistbox:-moz-locale-dir(rtl) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
  direction: rtl;
}

#contactlistbox:-moz-locale-dir(rtl),
#contactlistbox:-moz-locale-dir(ltr) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
  direction: ltr;
}

richlistitem[is="chat-group-richlistitem"] {
  align-items: center;
  padding-inline-start: 4px;
  margin-inline-end: 1px;
}

richlistitem[is="chat-group-richlistitem"] > label {
  margin-inline-start: 4px;
}

richlistitem[is="chat-group-richlistitem"],
richlistitem[is="chat-imconv-richlistitem"][unread] {
  font-weight: bold;
}

richlistitem[is="chat-imconv-richlistitem"][attention] {
  color: blue;
}

richlistitem[is="chat-group-richlistitem"][selected] {
  background-color: var(--imgroup-selected-background-color);
  color: var(--imbox-selected-text-color);
}

richlistbox:focus > richlistitem[is="chat-group-richlistitem"][selected="true"] {
  background-color: var(--imgroup-selected-background-color);
  color: var(--imbox-selected-text-color);
}

richlistitem[is="chat-imconv-richlistitem"],
richlistitem[is="chat-contact-richlistitem"] {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  align-items: center;
}

.contact-hbox {
  align-items: center;
  overflow: hidden;
}

.conv-hbox {
  overflow: hidden;
}

.box-line {
  width: 2px;
  height: 100%;
}

richlistitem[is="chat-contact-richlistitem"] > .box-line {
  /* equalize the space, the .closeConversationButton uses */
  margin-inline-end: 22px;
}

.box-line[selected=true] {
  background-color: var(--tabline-color);
}

richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
  pointer-events: auto;
}

richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
  background-color: rgba(0,0,0,.1);
}

:root[lwt-tree] richlistitem[is="chat-group-richlistitem"],
:root[lwt-tree] richlistitem[is="chat-imconv-richlistitem"]:not([selected]),
:root[lwt-tree] richlistitem[is="chat-contact-richlistitem"]:not([selected]) {
  color: var(--sidebar-text-color);
}

richlistitem[is="chat-imconv-richlistitem"][selected=true],
richlistitem[is="chat-contact-richlistitem"][selected=true] {
  background-color: var(--imbox-selected-background-color) !important;
  border-color: var(--splitter-color) !important;
  color: var(--imbox-selected-text-color) !important;
}

:root[lwt-tree] richlistitem[is="chat-group-richlistitem"][selected],
:root[lwt-tree] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
  background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

:root[lwt-tree-brighttext] richlistitem[is="chat-group-richlistitem"][selected],
:root[lwt-tree-brighttext] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
  background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
}

richlistitem[is="chat-imconv-richlistitem"]:not(:hover) > .closeConversationButton {
  visibility: hidden;
}

/* From instantbird/themes/blist.css */
.contactStatusText,
.convStatusText {
  color: GrayText;
}

.convDisplayName,
.blistDisplayName,
.contactDisplayName,
richlistitem[is="chat-group-richlistitem"] > label {
  display: inline-block;
}

.blistDisplayName {
  flex: 1 auto;
}

.convUnreadCount,
.contactDisplayName,
.convDisplayName,
.contactDisplayNameInput {
  margin-inline-end: 0;
}

.contactDisplayNameInput {
  margin: 0;
}

.convUnreadCount {
  margin-inline-start: 0.5ch;
}

.convUnreadTargetedCount {
  color: hsl(0, 100%, 27%);
  background-color: hsl(0, 100%, 87%);
  border-radius: 50px;
  margin: 1px 3px;
  margin-inline-start: 1ch;
}

.convUnreadCount[value="0"],
.convUnreadTargetedCount[value="0"] {
  display: none;
}

.convUnreadTargetedCountLabel {
  margin: 0;
}

.contactStatusText,
.convStatusText {
  margin-inline-start: 0;
}

/* Avoid a strange jumping bug when hovering and the startChatBubble appears */
.contact-vbox {
  min-height: 40px;
}

.startChatBubble,
.closeConversationButton {
  margin: 0 3px;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  cursor: pointer;
  -moz-user-focus: ignore;
}

.startChatBubble {
  display: none;
  list-style-image: var(--icon-new-chat);
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

richlistitem[is="chat-contact-richlistitem"][cansend]:hover .startChatBubble {
  display: flex;
}

.closeConversationButton > .button-box > .button-icon {
  width: 16px;
  height: 16px;
}

/* From im/themes/conversation.css */
.browser {
  margin: 0 0;
}

.conv-bottom, .conv-nicklist {
  margin: 0 0;
}

.convBox {
  min-height: 135px;
  min-width: 200px;
}

.conv-top {
  min-height: 60px;
}

.conv-top-info {
  margin: 0;
  border-style: none;
  appearance: none;
  -moz-window-dragging: no-drag;
  border-bottom: 1px solid var(--splitter-color);
}

.userIcon {
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 5px;
  object-fit: contain;
  width: 48px;
  height: 48px;
}

:root[lwt-tree-brighttext] .userIcon {
  border-color: rgba(255,255,255,0.15);
}

.userIcon:not([src]) {
  display: none;
}

.fillUserIcon {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.3;
}

.statusTypeIcon, .smallStatusIcon {
  /* Place in opposite corner. */
  /* NOTE: unlike position: absolute, the image will still take up space if its
   * sibling (such as .userIcon) is hidden. */
  margin-block: auto 0;
  margin-inline: auto 0;
}

.statusTypeIcon {
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, var(--color-ink-50) 20%, transparent);
  stroke: var(--color-ink-50);
}

#statusTypeIcon:not([disabled]) {
  cursor: pointer;
}

.userIcon:not([src]) + .statusTypeIcon {
  /* If userIcon is invisible (for chat) we still keep the status icon in the
   * same position. */
  padding-block-start: 32px;
}

/* Used with protoIcon. */
.smallStatusIcon {
  width: 10px;
  height: 10px;
}

#protolist richlistitem {
  align-items: center;
}

.protoIcon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.protoIconDimmed {
  opacity: 0.7;
}

richlistitem:not([selected]) .protoIconDimmed {
  opacity: 0.3;
}

:root[lwt-tree-brighttext] .protoIconDimmed {
  opacity: 0.8;
}

:root[lwt-tree-brighttext] richlistitem:not([selected]) .protoIconDimmed {
  opacity: 0.5;
}

#statusTypeIcon[status="available"],
#statusTypeAvailable,
#imStatusAvailable {
  list-style-image: var(--icon-status-online);
}

#statusTypeIcon[status="idle"] {
  list-style-image: var(--icon-status-idle);
}

#statusTypeIcon[status="offline"],
#statusTypeIcon[status="invisible"],
#statusTypeOffline,
#imStatusOffline {
  list-style-image: var(--icon-status-offline);
}

#statusTypeIcon[status="unavailable"],
#statusTypeIcon[status="away"],
#statusTypeUnavailable,
#imStatusUnavailable {
  list-style-image: var(--icon-status-away);
}

/* corresponds to im/themes/conversation.css @media all and (min-height: 251px) */
.displayUserAccount {
  padding: 6px;
  display: flex;
  gap: 6px;
}

/* User image and status stack. */
.displayUserAccount > stack {
  flex: 0 0 auto;
  align-self: start;
}

.nameAndStatusGrid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
}

.nameAndStatusGrid > * {
  margin: 0;
}

.nameAndStatusGrid > :is(hr, .statusMessage, .statusMessageInput) {
  grid-column: 1 / 3;
}

.nameAndStatusGrid > hr {
  height: 0;
  border-block-start: 1px solid hsla(0, 0%, 50%, 0.5);
  border-block-end: none;
  border-inline: none;
}

.displayName {
  font-size: larger;
  display: block;
}

.nameAndStatusGrid > .displayName:empty + hr {
  display: none;
}

.statusMessage {
  display: inline-block;
}

.statusMessage[noTopic] {
  font-style: italic;
}

.statusMessageInput[editing] {
  color: -moz-dialogtext;
}

.conv-messages {
  min-width: 150px;
}

/* Animation copied from the find bar in Firefox - http://dxr.mozilla.org/mozilla-central/source/toolkit/themes/linux/global/findBar.css#7 */
.conv-status-container {
  display: block;
  height: 20px;
  padding: 3px;
  border-bottom: 1px solid ThreeDShadow;
  transition-property: margin-top, opacity, visibility;
  transition-duration: 150ms, 150ms, 0s;
  transition-timing-function: ease-in-out, ease-in-out, linear;
}

.conv-status-container[hidden] {
  /* Override display:none to make the transition work. */
  display: flex;
  visibility: collapse;
  margin-top: -1em;
  opacity: 0;
  transition-delay: 0s, 0s, 150ms;
}

.conv-textbox {
  appearance: none;
  margin: 0;
  /* margin-inline-end so the borders show up on all sides. */
  margin-inline-end: 1px;
  padding: 2px;
  box-sizing: content-box;
  border: 2px solid transparent;
}

:root[lwt-tree] .conv-textbox {
  background-color: var(--toolbar-field-background-color);
  color: var(--toolbar-field-color);
}

.conv-textbox:focus-visible {
  border-color: var(--toolbar-field-focus-border-color);
  outline-style: none;
}

.conv-textbox[invalidInput="true"] {
  border-color: red;
}

.conv-counter {
  justify-self: end;
  align-self: end;
  color: #000;
  background-color: rgba(246, 246, 246, 0.7);
  border-inline-start: 1px solid rgb(200, 200, 200);
  border-top: 1px solid rgb(200, 200, 200);
  /* Padding that gets flipped to margins in .conv-counter[value^="0"] to avoid the red border. */
  font-size: 130%;
  padding-top: 0;
  padding-bottom: 1px;
  padding-inline-start: 5px;
  padding-inline-end: 6px;
  margin: 0;
}

:root[lwt-tree-brighttext] .conv-counter {
  color: var(--sidebar-text-color);
  background-color: rgba(22, 22, 22, 0.2);
  border-inline-start: 1px solid var(--splitter-color);
  border-top: 1px solid var(--splitter-color);
}

.conv-counter:-moz-locale-dir(ltr) {
  border-top-left-radius: 3px;
}

.conv-counter:-moz-locale-dir(rtl) {
  border-top-right-radius: 3px;
}

.conv-counter[value=""] {
  display: none;
}

/* Negative counter values (user went over the character limit). */
.conv-counter[value^="-"] {
  color: red;
}

.splitter[orient="vertical"],
#logsSplitter {
  border-style: none;
  min-height: 0;
  /* splitter grip area */
  height: 5px;
  background-color: transparent;
  /* make only the splitter border visible */
  margin-top: -5px;
  margin-inline-start: 0;
  /* because of the negative margin needed to make the splitter visible */
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--splitter-color);
}

/* Adaptation of #folderpane_splitter */
#listSplitter,
#contextSplitter {
  margin-top: 0;
  /* splitter grip area */
  width: 5px;
  /* because of the negative margin needed to make the splitter visible */
  position: relative;
  z-index: 10;
  transition: border-width .3s ease-in;
}

#listSplitter {
  border-inline-start: 1px solid transparent;
  /* make only the splitter border visible */
  margin-inline-end: -5px;
}

#listSplitter[state="collapsed"]:hover {
  border-inline-start: 4px solid var(--selected-item-color);
}

#contextSplitter {
  border-inline-end: 1px solid var(--splitter-color);
  /* make only the splitter border visible */
  margin-inline-start: -5px;
}

#contextSplitter[state="collapsed"]:hover {
  border-inline-end: 4px solid var(--selected-item-color);
}

#conv-toolbar {
  border-style: none;
}

#logTree {
  margin: 0 0;
}

.conv-nicklist-label {
  pointer-events: none;
  font-weight: bold;
  padding-inline-start: 1px;
  display: inline-block;
}

.conv-nicklist-image {
  pointer-events: none;
  width: 16px;
  margin: 0 2px;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.conv-nicklist-image:not([src]) {
  visibility: hidden;
}

.conv-logs-header-label {
  appearance: auto;
  -moz-default-appearance: treeheadercell;
  margin: 0 -1px 0 0;
  padding-left: 3px;
}

#nicklist > richlistitem[inactive] > .conv-nicklist-image {
  opacity: 0.45;
}

#nicklist > richlistitem[inactive][selected] > .conv-nicklist-image {
  opacity: 0.7;
}

#nicklist > richlistitem[inactive] > label {
  color: GrayText !important;
  font-weight: normal;
}

.conv-nicklist:focus > richlistitem[inactive][selected] > label {
  color: var(--selected-item-text-color) !important;
}

/* from instantbird/themes/blist.css */
richlistitem[is="chat-group-richlistitem"] .twisty {
  padding-top: 1px;
  width: 10px;
  height: 10px;
  margin-inline-start: 5px;
  background: var(--icon-nav-down-sm) no-repeat center;
  background-size: contain;
  -moz-context-properties: stroke;
  stroke: currentColor;
}

richlistitem[is="chat-group-richlistitem"].closed .twisty {
  transform: rotate(-90deg);
}

richlistitem[is="chat-group-richlistitem"].closed:-moz-locale-dir(rtl) .twisty {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: no-preference) {
  richlistitem[is="chat-group-richlistitem"] .twisty {
    transition: transform 200ms ease;
  }
}

.prplBuddyIcon {
  margin: 2px 0;
}

.searchProtoIcon {
  -moz-context-properties: fill;
  fill: currentColor;
  opacity: 0.54;
}

#statusTypeIcon {
  min-width: 40px;
}

/* show the status icon also in text mode */
toolbar[mode="text"] #statusTypeIcon > .toolbarbutton-icon {
  display: flex;
}

.status-container {
  width: 15em;
}

#statusMessageLabel:not([statusType="offline"],[disabled]) {
  cursor: text;
}

#statusMessageInput.status-message-input {
  margin: 0;
}

.statusMessageToolbarItem {
  margin: 2px 4px;
  margin-inline-start: -1px;
  padding: 3px 5px 4px;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
  background-clip: padding-box;
}

#chat-status-selector:hover > vbox > .statusMessageToolbarItem,
.statusMessageToolbarItem:focus {
  color: var(--toolbar-field-color);
  background-color: var(--toolbar-field-background-color);
  border-color: var(--toolbar-field-border-color);
}

#chat-status-selector > vbox > .statusMessageToolbarItem[editing],
.statusMessageToolbarItem:-moz-lwtheme:focus {
  appearance: none;
  padding-inline-start: 4px;
  padding-inline-end: 4px;
  color: var(--toolbar-field-color);
  background-color: var(--toolbar-field-focus-background-color);
  border-color: var(--toolbar-field-focus-border-color);
  outline: 1px solid var(--toolbar-field-focus-border-color);
}

.statusMessageToolbarItem[statusType="offline"],
.statusMessageToolbarItem[disabled] {
  border: none;
}

.alltabs-item[style*="chat.svg"] {
  -moz-context-properties: fill, stroke-opacity;
  stroke-opacity: 0;
  fill: currentColor;
}

#button-add-buddy {
  list-style-image: var(--icon-new-contact);
}

#button-join-chat {
  list-style-image: var(--icon-new-chat);
}

#button-chat-accounts {
  list-style-image: var(--icon-id);
}

:root[lwt-tree] #contextPane {
  background-color: var(--sidebar-background-color);
  border-bottom: 1px solid var(--sidebar-border-color);
  color: var(--sidebar-text-color);
}

#contextPaneFlexibleBox {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#contextPaneFlexibleBox vbox.conv-chat {
  flex: 1 1 0;
  min-height: 0;
}

#previousConversations {
  flex: 1 1 0;
}

:root[lwt-tree] #nicklist,
:root[lwt-tree] .conv-nicklist-header,
:root[lwt-tree] .conv-logs-header-label {
  appearance: none;
  background-color: var(--sidebar-background-color);
  border-bottom: 1px solid var(--sidebar-border-color);
  color: var(--sidebar-text-color);
}

:root[lwt-tree-brighttext] #nicklist,
:root[lwt-tree-brighttext] .conv-nicklist-header,
:root[lwt-tree-brighttext] .conv-logs-header-label {
  border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
}

.conv-header-label {
  display: inline-block;
}

#participantCount {
  background: transparent;
  width: 0;
}

:root[lwt-tree] #participantCount {
  color: var(--sidebar-text-color);
}

:root[lwt-tree] .conv-nicklist > richlistitem {
  color: var(--sidebar-text-color);
  box-shadow: none;
}

:root[lwt-tree] .conv-nicklist > richlistitem[selected="true"],
:root[lwt-tree] .conv-nicklist:focus > richlistitem[current="true"],
:root[lwt-tree] .conv-nicklist:focus > richlistitem[selected="true"] {
  background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
  background-image: none;
  border-color: var(--sidebar-border-color);
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

:root[lwt-tree-brighttext] .conv-nicklist > richlistitem[selected="true"],
:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[current="true"],
:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[selected="true"] {
  background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
}

:root[lwt-tree] #nicklist > richlistitem[inactive]:not([selected]) > label {
  color: var(--sidebar-text-color) !important;
  opacity: .55;
}

:root[lwt-tree] #nicklist > richlistitem[inactive][selected] > label,
:root[lwt-tree] #nicklist:focus > richlistitem[inactive][selected] > label {
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
}

:root[lwt-tree] #logTree {
  appearance: none;
}

#goToConversation {
  appearance: none !important;
  margin: 4px;
  padding: 1px !important;
  color: inherit !important;
  border: 1px solid hsla(0, 0%, 50%, 0.5);
  border-radius: var(--button-border-radius);
  background-color: hsla(0, 0%, 50%, 0.2) !important;
  box-shadow: none;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
}

#goToConversation:hover {
  background-color: hsla(0, 0%, 50%, 0.3) !important;
}

#goToConversation:hover:active {
  background-color: hsla(0, 0%, 50%, 0.4) !important;
  box-shadow: 0 0 1px hsla(0, 0%, 50%, 0.15) inset;
}


/* Chat Toolbar button. */
toolbar[mode="text"] #button-chat {
  flex-direction: row;
}

.badgeButton-badge {
  background-color: red;
  border: 1px solid white;
  border-radius: 1em;
  box-shadow: 1px 1px 1px black;
  color: white;
  font: xx-small Helvetica, Verdana, Tahoma, sans-serif;
  height: -moz-fit-content;
  min-width: 1em;
  text-align: center;
  margin-top: -4px;
  margin-inline-start: 5px;
  margin-inline-end: 0;
  padding-inline: 1px;
  padding-block: 1px 0;
}

toolbar[mode="text"] .badgeButton-badge {
  margin: 0;
}

.badgeButton-badgeLabel {
  margin: 0;
}

/* encryption status selector */

.encryption-container {
  border-top: 1px solid var(--splitter-color);
  min-height: 32px;
  padding: 4px;
}

.encryption-label {
  font-weight: 600;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.encryption-not-private > image {
  list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-insecure.svg");
}

.encryption-unverified > image {
  list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-unverified.svg");
}

.encryption-finished > image {
  list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-finished.svg");
}

.encryption-private > image {
  list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-private.svg");
}

.encryption-button {
  appearance: none !important;
  padding: 1px !important;
  border: 1px solid var(--toolbarbutton-hover-bordercolor);
  border-radius: var(--button-border-radius);
  background: var(--toolbarbutton-hover-background) !important;
  box-shadow: var(--toolbarbutton-hover-boxshadow);
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.encryption-button:not([disabled="true"]):not([open="true"]):hover {
  background: var(--toolbarbutton-active-background) !important;
  border-color: var(--toolbarbutton-active-bordercolor);
}

.encryption-button[open="true"] {
  background: var(--toolbarbutton-active-background) !important;
  border-color: var(--toolbarbutton-active-bordercolor);
  box-shadow: var(--toolbarbutton-active-boxshadow);
}

.encryption-button > image {
  margin-inline-end: 3px !important;
  width: 14px;
}

.encryption-button .toolbarbutton-menu-dropmarker {
  appearance: none !important;
  list-style-image: var(--icon-nav-down-sm);
  margin-inline: 3px 0;
  -moz-context-properties: stroke;
  stroke: currentColor;
}