/* Global */

textview, text {
  color: inherit;
  background: none;
}

.bold {
  font-weight: bold;
}

button.pill.large {
  padding: 12px 40px;
}

.emoji {
  font-size: 2em;
}

listview.content {
	border-radius: 9px;
	border-width: 1px;
	border-style: solid;
}

listview.content row:last-child {
	border-bottom-width: 0px;
}

headerbar .suggested-action, .standalone-button {
  min-width: 70px;
}

button.opaque.success {
  color: @success_fg_color;
  background-color: @success_bg_color;
}

.extra-large-icon {
  -gtk-icon-size: 128px;
}

.extra-large-icon.error {
  color: @error_bg_color;
}

button.row {
  min-height: 34px;
  border-radius: 12px;
}

.round-corners {
  border-radius: 6px;
}

.form-page scrolledwindow > viewport > clamp > box {
  margin: 42px 12px;
  border-spacing: 24px;
}

.form-page .card {
  padding: 2px;
}

.form-page levelbar.discrete block {
  min-height: 5px;
}

box.paragraphs {
  border-spacing: 12px;
}

levelbar.discrete.accent block.filled {
  background-color: @accent_color;
}

levelbar.discrete.success block.filled {
  background-color: @success_color;
}

levelbar.discrete.warning block.filled {
  background-color: @warning_color;
}

levelbar.discrete.error block.filled {
  background-color: @error_color;
}

.content .label-button {
	min-width: 86px;
}

.fix-preferences-page {
  margin: 24px 12px;
  border-spacing: 24px;
}

button.overlaid {
  margin: 3px; /* Make sure the outline is fully visible */
}

.avatar-row-list contents, .string-row-list contents {
  padding: 0;
}

.avatar-row-list viewport, .avatar-row-list listview, .string-row-list viewport, .string-row-list listview {
  padding: 8px;
}

.avatar-row-list list, .avatar-row-list listview, .string-row-list list, .string-row-list listview {
  background-color: transparent;
}

.avatar-row-list row {
  border-radius: 6px;
  margin: 3px 0px;
  padding: 6px;
  outline-width: 0;
}

.avatar-row-list row:first-child {
  margin-top: 0px;
}

.avatar-row-list row:last-child {
  margin-bottom: 0px;
}

.string-row-list row {
  border-radius: 6px;
  margin: 0px;
  padding: 6px;
  outline-width: 0;
}

.avatar-row-list row:focus, .string-row-list row:focus {
  background-color: alpha(currentColor, .07);
}

.avatar-row-list row:hover, .string-row-list row:hover {
  background-color: alpha(currentColor, .07);
}

.avatar-row-list row:active, .string-row-list row:active {
  background-color: alpha(currentColor, .16);
}

.avatar-row-list row:checked, .string-row-list row:checked {
  background-color: alpha(currentColor, .1);
}

.entry-row-error-revealer {
  margin-top: 6px;
}

.card-icon {
  padding: 12px;
  border-radius: 100%;
  -gtk-icon-size: 20px;
}

.card-icon.success {
  color: @success_color;
  background-color: alpha(@success_bg_color,.3);
}

.card-icon.warning {
  color: @warning_color;
  background-color: alpha(@warning_bg_color,.3);
}

.card-icon.error {
  color: @error_color;
  background-color: alpha(@error_bg_color,.3);
}

.card.command {
  border-radius: 6px;
  font-size: 90%;
}

scrolledwindow.card {
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
}

scrolledwindow.card:focus-within {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

scrolledwindow.card > textview {
  padding: 12px;
}


/* Components */

inline-pill {
  border-radius: 9999px;
  background-color: alpha(@view_fg_color, 0.1);
  padding-right: 6px;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
}

inline-pill:focus {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

inline-pill.activatable:hover {
  background-color: alpha(currentColor, .17);
}

inline-pill.activatable:hover image {
  filter: brightness(1.07) ;
}

inline-pill.activatable:active {
  background-color: alpha(currentColor, .26);
}

inline-pill.activatable:active image {
  filter: brightness(1.16) ;
}

.app-notification {
  border-radius: 9999px;
  padding-left: 24px;
}

.app-notification inline-pill {
  background-color: alpha(@window_bg_color, 0.2);
}

.selected-avatar avatar {
  border: 2px solid @accent_bg_color;
}

.blue-checkmark {
  color: @light_1;
  border-radius: 9999px;
  border: solid @accent_bg_color 2px;
  background-color: @accent_bg_color;
}

role-badge {
  color: @dark_5;
  background-color: @light_3;
  border-radius: 0.4em;
  padding: 0.1em 0.5em;
  font-size: 0.8em;
}

role-badge.admin {
  color: @error_fg_color;
  background-color: @error_bg_color;
}

role-badge.mod {
  color: @warning_fg_color;
  background-color: @warning_bg_color;
}

role-badge.muted {
  color: @light_1;
  background-color: @dark_2;
}

media-viewer toolbarview headerbar {
  background: black;
  color: white;
}

media-content-viewer controls {
  min-width: 300px;
}

location-viewer .map-marker {
  color: @accent_color;
}

entry inline-pill {
	margin-bottom: -0.5em;
}

editable-avatar .cutout {
  background-color: @window_bg_color;
  border-radius: 9999px;
  padding: 2px;
}

spinner-wrapper.large spinner {
  min-width: 32px;
  min-height: 32px;
}

.substring-entry-row .header .subtitle {
  margin-top: 4px;
  margin-bottom: -4px;
}

.substring-entry-row .header text placeholder {
  opacity: 0.55;
}

.role-selection-popover viewport > box {
  padding: 6px;
}

.role-selection-popover list row {
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
}

.role-selection-popover list row.spin {
  padding: 0;
}

.role-selection-popover row.spin > box {
  min-height: 30px;
}

.role-selection-popover row.spin spinbutton > button {
  margin-top: 6px;
  margin-bottom: 6px;
}

.role-selection-popover row.spin button.spin-confirm {
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  margin-left: 2px;
}

.role-selection-popover row.spin button.spin-confirm:dir(rtl) {
  margin-left: 0;
  margin-right: 2px;
}

.role-selection-popover row.spin button.spin-confirm image {
  padding: 7px;
}

row.button-row box.header {
  margin-left: 12px;
  margin-right: 12px;
  border-spacing: 6px;
  min-height: 40px;
}

crop-circle > .mask {
  background: black;
  border-radius: 9999px;
}

user-page scrolledwindow > viewport > clamp > box {
  margin: 12px;
  border-spacing: 24px;
}


/* Login */

login {
  min-width: 250px;
}

qrcode {
  background-color: white;
  padding: 12px;
}

.sso-button {
  padding: 4px;
  -gtk-icon-size: 26px;
  min-height: 34px;
}


/* Session Setup */

setup-view clamp {
  margin: 12px;
}

setup-view .text-button {
  min-width: 200px;
}


/* Account switcher */

.account-switcher list {
  background-color: transparent;
}

.account-switcher .account-switcher-row {
  border-radius: 10px;
  margin: 3px 0px;
  padding: 6px 12px;
}

.account-switcher .account-switcher-row:first-child {
  margin-top: 0px;
}

.account-switcher button.account-switcher-row {
  font-weight: normal;
  margin-bottom: 0;
}

#new-login-icon {
  padding: 12px; /* 2 * padding + pixel-size = size (of avatar) */
  background-color: alpha(currentColor, .1);
  border-radius: 9999px;
}


/* Sidebar */

sidebar .collapse-spacing {
  padding: 0;
}

.sidebar-list row {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.sidebar-list row:focus-within {
  outline: 0;
}

.sidebar-list row:hover,
.sidebar-list row:selected {
  background: none;
}

sidebar-row > *:not(popover) {
  margin: 0 6px;
  padding: 9px;
  border-radius: 6px;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
  margin-top: 2px;
}

sidebar-row:focus > *:not(popover) {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

sidebar-row:not(.drop-mode) > *:not(popover):hover {
  background-color: alpha(currentColor, 0.07);
}

.sidebar-list row:active sidebar-row > *:not(popover) {
  background-color: alpha(currentColor, 0.16);
}

.sidebar-list row:selected sidebar-row > *:not(popover) {
  background-color: alpha(currentColor, 0.1);
}

.sidebar-list row:selected sidebar-row:not(.drop-mode) > *:not(popover):hover {
  background-color: alpha(currentColor, 0.13);
}

.sidebar-list row:selected:active sidebar-row > *:not(popover) {
  background-color: alpha(currentColor, 0.19);
}

sidebar-row icon-item {
  background: none;
  font-weight: bold;
}

sidebar-row icon-item image {
  min-width: 24px; /* Same width as avatars, so the text is aligned */
}

sidebar-row category {
  margin-top: 6px;
  font-size: 0.8em;
  font-weight: bold;
}

sidebar-row category image.arrow {
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

sidebar-row category:not(:checked) image.arrow:dir(ltr) {
  transform: rotate(-0.5turn);
}

sidebar-row category:not(:checked) image.arrow:dir(rtl) {
  transform: rotate(0.5turn);
}

sidebar-row .notification-count {
  font-weight: bold;
  font-size: 0.8em;
  border-radius: 10px;
  min-width: 0.7em;
  padding: 2px 5px;
  color: currentColor;
  background-color: alpha(currentColor, 0.15);
}

sidebar-row .highlight {
  color: @accent_fg_color;
  background-color: @accent_bg_color;
}

sidebar-row.drag > * {
  color: @accent_fg_color;
  background-color: @accent_bg_color;
  opacity: 0.6;
}

sidebar-row.drop-disabled > *:not(popover) {
  opacity: 0.6;
}

sidebar-row.drop-empty > *:not(popover) {
  color: @accent_color;
}

sidebar-row icon-item.forget {
  color: @error_color;
  background: none;
}

sidebar-row.drop-active {
  background-color: alpha(@accent_color, 0.1);
}

sidebar-row.drop-active category {
  color: @accent_color;
}

sidebar-row.drop-active .dim-label,
sidebar-row.drop-active.drop-empty .dim-label {
  opacity: 1;
}


/* Room History */

.room-history .room-history-list {
  padding-bottom: 0;
}

.room-history .room-history-list > row {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

room-history-row {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
  margin-top: 2px;
}

room-history-row.has-header {
  margin-top: 6px;
}

room-history-row:not(.has-header) .event-content:dir(ltr),
room-history-row:not(.has-header) message-reactions:dir(ltr) {
  margin-left: 46px;
}

room-history-row:not(.has-header) .event-content:dir(rtl),
room-history-row:not(.has-header) message-reactions:dir(rtl) {
  margin-right: 46px;
}

room-history-row:focus {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

room-history-row.has-open-popup  {
  background-color: alpha(currentColor, 0.07);
}

room-history-row.selected {
  background-color: alpha(currentColor, 0.1);
}

room-history-row.selected.has-open-popup {
  background-color: alpha(currentColor, 0.13);
}

room-history-row.highlight {
  background-color: alpha(@accent_bg_color, .2);
}

room-history-row.highlight.has-open-popup {
  background-color: alpha(@accent_bg_color, .25);
}

room-history-row.highlight.selected {
  background-color: alpha(@accent_bg_color, .3);
}

room-history-row.highlight.selected.has-open-popup {
  background-color: alpha(@accent_bg_color, .33);
}

room-history-row .event-content .emoji {
  font-size: 3em;
}

room-history-row .event-content .emote {
  color: @accent_color;
}

.content-thumbnail {
  border-radius: 6px;
  background-color: @borders;
}

.content-thumbnail .osd.circular {
  min-width: 64px;
  min-height: 64px;
  border-radius: 32px;
}

.content-thumbnail .timestamp {
  border-radius: 4px;
  padding: 2px 5px;
}

room-history-row .event-content .quote,
.related-event-content {
  border-left: 2px solid @accent_bg_color;
  padding-left: 6px;
  opacity: 0.7;
}

message-reactions flowboxchild:hover,
message-reactions flowboxchild:active {
  /* Cancel effect under .navigation-sidebar from libadwaita */
  background-color: transparent;
}

message-reactions .toggle {
  padding: 1px 4px 0 5px;
}

message-reactions .reaction-key {
  font-size: 0.8em;
}
message-reactions .reaction-key.emoji{
  font-size: 1.1em;
}

message-reactions .reaction-count {
  font-size: 0.8em;
  padding-left: 6px;
}

.reaction-chooser {
  margin: 6px;
}

.reaction-chooser button {
  font-size: 1.3em;
  -gtk-icon-size: 1.3em;
  padding: 2px;
}

read-receipts-list {
  min-height: 24px;
  min-width: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
}

read-receipts-list:focus {  
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

read-receipts-list:hover {
  background-color: alpha(currentColor, .07);
}

read-receipts-list:active {
  background-color: alpha(currentColor, .16);
}

read-receipts-list:checked {
  background-color: alpha(currentColor, .1);
}

.divider-row {
  font-size: 0.9em;
  font-weight: bold;
}

.timestamp {
  min-width: 36px;
  font-weight: normal;
}

.codeview {
  border-radius: 5px;
  padding: 6px;
  font-family: monospace;
  background-color: @text_view_bg;
  color: @view_fg_color;
}

.related-event-toolbar {
  padding: 0 6px 0 12px;
}

.related-event-toolbar button {
  margin: 12px 6px;
  min-height: 24px;
  min-width: 24px;
}

.related-event-content {
  padding-top: 2px;
  padding-bottom: 2px;
}

typing-row {
  padding: 0 6px;
  min-height: 30px;
  font-style: italic;
}

room-history-row .h1, .related-event-content .h1 {
  font-weight: 800;
  font-size: 15pt;
}

room-history-row .h2, .related-event-content .h2 {
  font-weight: 800;
  font-size: 14pt;
}

room-history-row .h3, .related-event-content .h3  {
  font-weight: 700;
  font-size: 14pt;
}

room-history-row .h4, .related-event-content .h4  {
  font-weight: 700;
  font-size: 13pt;
}

room-history-row .h5, .related-event-content .h5  {
  font-weight: 700;
  font-size: 12pt;
}

room-history-row .h6, .related-event-content .h6  {
  font-weight: 700;
  font-size: 11pt;
}

room-history-row expander-widget > box > title {
  border-spacing: 6px;
}

room-history-row expander-widget > box > :not(title) {
  padding: 12px;
}

room-title {
  margin-top: -6px;
  margin-bottom: -6px;
  min-height: 12px;
  padding: 3px 0;
}

room-title menubutton, room-title menubutton .toggle {
  padding: 0;
}

room-title menubutton .toggle {
  padding: 0;
  padding-left: 12px;
  padding-right: 12px;
}

room-title menubutton image.arrow {
  transform: rotate(-0.5turn);
}

room-title .title {
  padding: 0;
  font-weight: bold;
}

room-title .subtitle {
  padding: 0;
  font-weight: normal;
}

sender-avatar {
  padding: 3px;
  border-radius: 100%;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
}

sender-avatar:focus {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

sender-avatar:hover {
  background-color: alpha(currentColor, .07);
}

sender-avatar:hover image {
  filter: brightness(1.07) ;
}

sender-avatar:active {
  background-color: alpha(currentColor, .16);
}

sender-avatar:active image {
  filter: brightness(1.16) ;
}

sender-avatar:checked {
  background-color: alpha(currentColor, .1);
}

sender-avatar:checked image {
  filter: brightness(1.1) ;
}

sender-avatar popover button.text-button {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 400;
}


/* Event Source Dialog */

.event-details-dialog .sourceview {
  font-family: monospace;
}


/* Explore */

.explore .padded-button {
  min-width: 64px;
}

.explore-servers-popover list {
  background-color: transparent;
  color: inherit;
}

.explore-servers-popover list row {
  min-height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  margin: 0 0 2px;
}

.explore-servers-popover list row button {
  min-height: 24px;
  min-width: 24px;
}

.explore .public-rooms row {
  border-radius: 6px;
  margin: 6px 0;
  padding: 12px;
}


/* Invite */

.invite-room-name {
  font-size: 1.6em;
}

.invite-search-results {
	padding: 12px 0px;
}

.invite-search-results > row {
	border-radius: 6px;
}

/* Media History Viewer */

media-history-viewer {
  background: black;
  color: white;
}

media-history-viewer headerbar {
  background: none;
  box-shadow: none;
}

media-history-viewer gridview {
  background: none;
  padding: 2px;
}

media-history-viewer-item {
  background: none;
  /* ease-out-quad */
  transition: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

media-history-viewer-item:hover, media-history-viewer-item:focus {
  transform: scale(1.03);
}

media-history-viewer-item:active {
  transform: scale(0.98);
}

media-history-viewer-item > overlay > image {
  border-radius: 100%;
  padding: 12px;
  -gtk-icon-size: 24px;
}


/* File History Viewer */

file-history-viewer listview > row {
  border-radius: 0;
  padding: 6px;
}

file-history-viewer listview > row:last-child {
  border-bottom-width: 0;
}


/* Audio History Viewer */

audio-history-viewer listview > row {
  border-radius: 0;
  padding: 6px;
}

audio-history-viewer listview > row:last-child {
  border-bottom-width: 0;
}


/* Room Details */

.room-details listview {
	background: transparent;
}

members-list row {
  margin-bottom: 6px;
  padding: 8px 12px;
  min-height: 32px;
  border-radius: 12px;
}

members-list row .icon:dir(ltr) {
  margin-right: 6px;
}

members-list row .icon:dir(rtl) {
  margin-left: 6px;
}

dragoverlay statuspage {
  background-color: alpha(@accent_bg_color, 0.5);
  color: @accent_fg_color;
}

.public-address-tag {
  color: @accent_fg_color;
  background-color: @accent_bg_color;
  border-radius: 0.4em;
  padding: 0.3em 0.5em;
  margin-left: 0.5em;
}

.permissions-member-list > row {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  margin: 6px;
}

permissions-member-row {
  padding: 8px;
  border-radius: 12px;
  transition-property: outline, outline-width, outline-offset, outline-color;
  transition-duration: 300ms;
  animation-timing-function: ease-in-out;
  outline: 0 solid transparent;
  outline-offset: 2px;
}

permissions-member-row:focus {
  outline-color: alpha(@accent_color, 0.5);
  outline-width: 2px;
  outline-offset: -2px;
}

permissions-member-row:hover, permissions-member-row.has-open-popup {
  background-color: alpha(currentColor, .07);
}

permissions-member-row:active {
  background-color: alpha(currentColor, .16);
}


/* Account Settings */

.account-settings listview {
	background: transparent;
}


/* Account Chooser Dialog */

.account-chooser list {
	background: transparent;
}

.account-chooser list row {
  margin-bottom: 6px;
  padding: 8px 12px;
  min-height: 32px;
  border-radius: 12px;
}
