/*  
    Quality of Life Enhancements to make Element less shitty
    compared to other instant messaging clients out there,
    make it feel a little bit more like a real thing.

    Ideas by schrumpel, 12/11/2021

*/

/* The default behaviour is just horrible and triggers me everytime I scroll through the timeline, apply this and see for yourself why this is better! */
.mx_MImageBody {
    width: max-content!important;
}
/* Running a Discord bridge for example and you will thank me for this, this is important because otherwise Messages from people that use Discord are shown with less opacity than normal messages, because they are being sent as notices */
.mx_MNoticeBody {
    opacity: 1!important;
}
/* make the file clipper appear on the left side, more intuitive for me */
.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_upload {
    position: absolute!important;
    left: 10px!important;
}
/* remove the horrible and ugly padding from the right panel */
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
    padding: 0!important;
}
/* also the border radius! */
.mx_RightPanel {
    border-radius: 0!important;
}
/* make avatars more edgy, but only 15% */
.mx_BaseAvatar_image {
    border-top-left-radius: 5px!important;
    border-top-right-radius: 5px!important;
    border-bottom-left-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
}

.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
    -webkit-mask-image: unset!important;
    mask-image: unset!important;
  }

/* videos/images should not have rounded borders... */
.mx_MImageBody_thumbnail, .mx_MVideoBody {
    border-radius: 0!important;
}

/* fix the ugly room list white border */
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
    padding: 1px!important;
    border: 3px solid transparent!important;
    border-radius: 15%!important;
    background: var(--roomlist-highlights-color) !important;
    box-shadow: 1px 1px 0px white, 1px -1px 0px white, -1px -1px 0px white, -1px 1px 0px white;
}

/* wtf is wrong with you guys?! */
/* why the hell are there 2 borders on the mx_RoomHeader? JESUS */
.mx_RoomHeader_wrapper {
    border: 0!important;
}

/* messagebox stuff*/
.mx_MessageComposer_wrapper {
    border-top: 1px solid #40444b36 !important;
}

.mx_SendMessageComposer {
    background: var(--timeline-background-color)!important;   
}

.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
    background: var(--roomlist-background-color)!important;
    padding: 10px!important;
    border-radius: 5px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

.mx_MessageComposer_e2eIcon.mx_E2EIcon {
    position: absolute!important;
    margin-right: 0!important;
    margin-left: -5px!important;
    width: 12px!important;
    height: 12px!important;
    top: 5px!important;
    left: unset !important;
    z-index: 1!important;
}

.mx_EventTile:not([data-layout="bubble"]):hover.mx_EventTile_verified .mx_EventTile_line {
    -webkit-box-shadow: inset 54px 0 0 -50px var(--accent)!important;
    box-shadow: inset 54px 0 0 -50px var(--accent)!important;
}

/*
>hardcoding the fucking color code jesus christ
https://github.com/matrix-org/matrix-react-sdk/blob/57fae019917bd309ef65e4599d061bd0409fb5b9/res/css/views/elements/_Tooltip.scss#L65
*/
.mx_Tooltip  {
    background-color: var(--tooltip-dark,#21262C)!important;
}

.mx_Dialog {
    box-shadow: unset!important;
    border: 1px solid var(--roomlist-highlights-color,black)!important;
    border-radius: 0!important;
}

.mx_textinput_icon.mx_textinput_search {
    border: 1px solid rgba(64,68,75,.21176470588235294) !important;
}

/* I really hate margin on p */
.markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
    margin-bottom: 0!important;
    padding: 0!important;
}

.mx_AuthHeader {
    background-color: black!important;
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded)::before {
    display: none!important;
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded) {
    display: none!important;
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded {
    display: none!important;
}

.mx_UserPill, .mx_RoomPill, .mx_GroupPill, .mx_AtRoomPill {
    border-radius: 0.6rem!important;
}

.mx_Pill {
    line-height: 1rem!important;
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill::before {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.mx_MStickerBody_wrapper {
    padding: 0!important;
}

.mx_EventTile_content .markdown-body code, .mx_EventTile_content .markdown-body pre {
    background-color: #1F1F1F!important;
}

.mx_MVideoBody {
    width: 500px !important;
    display: block !important;
    max-height: 300px !important;
    background: black !important;
    max-width: 100%!important;
}

.mx_UploadBar {
    padding: 10px!important;
    background: var(--roomlist-background-color)!important;
    color: var(--roomlist-text-color)!important;
}

progress.mx_ProgressBar {
    background-color: var(--roomlist-highlights-color,)!important;
}

.mx_RoomView_statusAreaBox_line {
    border: 0 !important
}

/* red notification badge */
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
    background: var(--alert)!important;
}

.mx_AccessibleButton.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
    background: var(--alert)!important;
}

.mx_UploadBar .mx_ProgressBar {
    width: 100%!important;
}