/* Set theme variables used for theme Generation */
@use './_themebase' with (
  $themeDarkOrLight: light,
  $accentColor: #000000,
  $bgChatView: #e6dcd4,
  $bgImage: url('./images/background_light.svg'),
  $bgMessageBubbleIncoming: #ecececaf,
  $bgMessageBubbleOutgoing: #efffde,
  $bgNavBar: #fff,
  $bgPrimary: #fff,
  $bgSecondary: #f5f5f5,
  $chatListItemSelectedBg: #4c6e7d,
  $colorDanger: #f96856,
  $colorNone: #a0a0a0,
  $colorPrimary: #000000,
  $newChatButtonBg: gray,
  $keybindingSectionHeaderBackground: rgba(0, 0, 0, 0.05),
  $keybindingActionBackground: rgba(0, 0, 0, 0.05),
  $keybindingKeyBorder: gray,
  $textPrimary: #010101,
  $textSecondary: #62656a,
  $textNavBar: #010101,
  $btnPrimaryText: #fff,
  $btnDangerText: #fff,
  $btnDangerBackground: #f96856,

  $scrollbarTransparency: 0.5
);

$AUTHOR_WIDTH: 8vw;
$AUTHOR_MESSAGE_SPACING: 20px;

$borderColor: #ecececaf;

$navbarBgLight: $borderColor;

.theme-meta {
  --name: 'Minimal';
  --description: 'A minimalistic theme';
}

/* overwrite themedata */
:root {
  --scrollbarThumb: black;
  --scrollbarThumbHover: black;
  --bp4DialogBgSecondary: #ececec;
  --chatListItemBgHover: transparent;
  --cli-search-result-divider: var(--delta-dialog-separator);
  --cli-search-result-divider-border-width: 0px;
  --emojiMartSelect: var(--chatListItemBgHover);

  --chatListItemBgPinned: var(--bgPrimary);
  --chatListItemBgPinnedHover: transparent;
  --chatListItemSelectedBg: white;
  --chatListItemSelectedBgHover: white;
  --chatListItemSelectedText: #4343f6;
  --chat-list-item-summary-text: var(--globalText);
  --composerSendButton: var(--scrollbarThumb);
  --navBarText: var(--globalText);
  --navBarSearchPlaceholder: var(--navBarText);
  --navBarGroupSubtitle: var(--globalText);
  --messageStatusIcon: var(--globalText);
  --messageMetadataIncoming: var(--globalText);
  --messageMetadataIconColorIncoming: var(--globalText);

  --messageOutgoingBg: var(--messageMetadataIconColorOutgoing);
  --messageQuotedText: var(--globalText);

  --infoMessageBubbleBg: black;
}

/* overwrite css */

.main-screen .navbar-chat-name {
  font-weight: normal;
}

.main-screen .navbar-chat-subtitle {
  font-weight: normal;
}

.chat-list {
  border-right: solid 1px $borderColor;
  box-shadow: none;
  overflow-x: hidden;
  & > div {
    width: calc(100% - 4px);
  }
}

.composer {
  border-left: unset;
  border-top: 1px solid $borderColor;
}

.message .msg-container {
  border-radius: 0px;
  padding: 0px;
  max-width: calc(100% - #{$AUTHOR_WIDTH} - #{$AUTHOR_MESSAGE_SPACING});
  .msg-body {
    & > .text {
      text-align: justify;
    }
  }
}

.message .msg-container .quote,
.composer .quote {
  padding: 0px 4px;
  padding-left: 18px;
  border-left-style: double;
  border-left-color: black !important;
  margin-left: 2px;
}
.message .msg-container .quote .quoted-text,
.composer .quote .quoted-text {
  font-size: 14px !important;
  line-height: 18px !important;
  max-height: 36px;
  text-align: justify;
}

.quote-author {
  display: none;
}

.attachment-overlay .attachment-view {
  background-color: rgba(255, 255, 255, 0.96);
}
.attachment-overlay .btn-wrapper {
  top: 9px;
  background-color: unset;
  padding: 0px;
}

.message-attachment-media {
  border-radius: 0px;
  text-align: unset;
  margin: 0;
}

.message.incoming .msg-container,
.message.incoming .msg-container .message-attachment-media {
  border-bottom-left-radius: 0px;
}

.metadata.with-image-no-caption {
  border-radius: 0px;
}

.message {
  width: 100%;
  max-width: 100%;
}

.message.incoming .msg-container {
  background-color: unset;
}

.message.outgoing .msg-container {
  background-color: unset;
}

.message.outgoing {
  float: none;
  flex-direction: row; // show hover shortcuts always at end of the message
}

.msg-container {
  width: 100%;
}

.attachment-overlay .attachment-view img,
.attachment-overlay .attachment-view video {
  max-width: calc(100vw - 200px);
}

.message-attachment-media > .attachment-content {
  object-fit: unset;
  object-position: unset;
}

.metadata.with-image-no-caption {
  border-radius: 0px;
  background-color: unset;
  position: unset;
  padding: unset;
  margin-top: 10px;
  margin-bottom: -7px;
  font-weight: unset;
}

.metadata {
  display: none;
}

.message > .author-avatar {
  display: none;
}
.message .msg-container .msg-body > .text {
  margin-right: 0px;
}

.msg-body {
  margin-left: calc(#{$AUTHOR_WIDTH} + #{$AUTHOR_MESSAGE_SPACING});
  margin-top: -22px;
}

.message.forwarded .forwarded-indicator {
  font-weight: 100;
  color: var(--messageMetadataIconColorIncoming);
  opacity: 1;
  margin-bottom: 22px;
  margin-left: calc(#{$AUTHOR_WIDTH} + #{$AUTHOR_MESSAGE_SPACING});
}

.author-wrapper.can-hide {
  display: unset !important;
}

.author-wrapper .author {
  width: $AUTHOR_WIDTH;

  text-overflow: clip;
  text-align: left;
}

.message-list-and-composer {
  background-color: white !important;
  background-image: unset !important;
  #message-list {
    padding: 0 12px;
  }
}

.info-message {
  margin: 0px;
  margin-bottom: 10px;
  text-align: left;
  color: rgb(0 0 0 / 20%);
  p {
    padding: 0px;
    text-transform: capitalize;
    color: inherit;
    margin: 0;
    &::before {
      margin-right: calc(#{$AUTHOR_WIDTH} - 8px + #{$AUTHOR_MESSAGE_SPACING});
      content: '--';
    }
  }
  .bubble {
    display: inline-block;
    text-align: left;
    font-weight: unset;
    padding: 0px;
    background-color: unset;
    border-radius: 0px;
    opacity: 0.9;
    color: inherit;
    &::before {
      content: '--';
      margin-right: calc(8vw + 10px);
    }
  }
}

.composer .lower-bar .send-button .paper-plane {
  background-blend-mode: difference;
  background-repeat: no-repeat;
  background-color: white;
}

.composer .lower-bar .send-button {
  background-color: transparent;
}

.selected .status-icon {
  background-color: var(--chatListItemSelectedText);
}

.avatar div.content,
.avatar img.content {
  border-radius: unset;
  color: transparent;
}

.status-icon.draft {
  background-color: transparent;
}

div.group-image-wrapper div.group-image-edit-button {
  left: -14px;
  top: -4px;
}

.contact-list-item#addmember,
.contact-list-item#action-go-to-login,
.contact-list-item#newgroup {
  & > .contact > .avatar > .content {
    color: white;
  }
}

.chat-list .search-result-divider {
  background: transparent;
  border-bottom: unset;
  &:not(:first-child) {
    border-top: 1px solid #ececec;
  }
}

::-webkit-scrollbar-thumb {
  background-color: unset;
  border-right: 3px solid;
  &:hover {
    background-color: unset;
  }
}

* {
  font-family: 'Roboto';
}

.emoji-container.jumbo {
  font-size: unset;
}

.sidebar {
  .sidebar-item {
    font-size: unset;
    cursor: pointer;
  }
  .account {
    .displayname {
      font-weight: normal;
    }
    .emailAddress {
      font-weight: normal;
    }
    .quickIcon {
      &:hover {
        cursor: pointer;
      }
    }
  }
  .account {
    border-bottom: solid 1px rgba(236, 236, 236, 0.6862745098);
  }
  .footer {
    display: block;
    position: absolute;

    bottom: 0;
    width: 100%;
    left: 0px;
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 10px;

    border-top: solid 1px rgba(236, 236, 236, 0.6862745098);
  }
}

.media-previous-button,
.media-next-button {
  background-color: unset;
  & > span > svg {
    fill: black !important;
    &:hover {
      fill: black;
      cursor: pointer;
    }
  }
}
