/*
This is the custom styles file where you can add anything you want.
The styles here will be injected into Caprine and will override default styles.
If you want to disable styles but keep the config, just comment the lines that you don't want to be used.

Here are some dark mode color variables to get you started.
Edit them to change color scheme of Caprine.
Press Command/Ctrl+R in Caprine to see your changes.
*/

/* colors */
.__fb-dark-mode,
.__fb-light-mode {
    --accent: hsl(342, 54%, 83%) !important;
    --blue-link: var(--accent) !important;
    --focus-ring-blue: var(--accent) !important;
    --primary-button-background: var(--accent) !important;
    --primary-button-pressed: var(--accent) !important;
    --primary-deemphasized-button-text: var(--accent) !important;
    --progress-ring-blue-foreground: var(--accent) !important;
    --switch-active: var(--accent) !important;
    --input-label-color-highlighted: var(--accent) !important;
    --toast-text-link: var(--accent) !important;
    --toggle-active-background: var(--accent) !important;
    --switch-active: var(--accent) !important;
    --input-label-color-highlighted: var(--accent) !important;
    --toggle-active-background: var(--accent) !important;
    --card-background: #191724 !important /* menu */;
    --messenger-card-background: #191724 !important; /* main */
    --surface-background: #191724 !important; /* sidebar */
    --pressable-background-color-selected: #1f1d2e !important; /* selected color */
    --pressable-background-color-hover: rgba(
        0,
        0,
        0,
        0.1
    ) !important; /* hovered color */
    --chat-incoming-message-bubble-background-color: #26233a !important; /* chat bubble */
    --chat-replied-message-background-color: #1f1d2e !important; /* reply bubble */
    --comment-background: #1f1d2e !important; /* chat box */
    --divider: transparent !important;
    --primary-icon: #e0def4 !important;
    --primary-button-icon: #191724 !important;
    --primary-text: #e0def4 !important;
    --primary-button-text: #191724 !important;
    --toggle-active-icon: #e0def4 !important;
    --toggle-active-text: #e0def4 !important;
    --icon-primary-color: #e0def4 !important;
    --icon-selected-color: #e0def4 !important;
    --icon-white-color: #e0def4 !important;
    --placeholder-icon: #908caa !important;
    --placeholder-text: #908caa !important;
    --secondary-button-text: #908caa !important;
    --secondary-icon: #908caa !important;
    --secondary-text: #908caa !important;
    --icon-inactive-color: #908caa !important;
    --media-inner-border: transparent !important;
    --media-outer-border: transparent !important;
    --card-background-flat: #191724 !important; /* tooltips */
    --container-color: #191724 !important; /* loading page */
    --container-dark-color: #191724 !important; /* loading page */
    --secondary-button-background: rgba(0, 0, 0, 0.1) !important;
    --secondary-button-background-floating: #26233a !important;
    --hover-overlay: rgba(0, 0, 0, 0.1) !important;
    --press-overlay: rgba(0, 0, 0, 0.2) !important;
    --messenger-card-box-shadow: none !important;
    --wash: #1f1d2e !important;
    --web-wash: #191724 !important;
}

/* scrollbar */
.x16o0dkt {
    scrollbar-width: none !important;
}

/* focus outline */
:focus {
    outline: none;
}

/* download app button */
[class="x9f619 x1n2onr6 x1ja2u2z x78zum5 x1r8uery xs83m0k xeuugli x1qughib x6s0dn4 xozqiw3 x1q0g3np xb756pt x1c4vz4f xt55aet xexx8yu xc73u3c x18d9i69 x5ib6vp x1lku1pv x12nzpgo"] {
    display: none !important;
}

/* caprine bug fix pr#2155 */
.__fb-dark-mode {
    --header-height: 0px !important;
}

/* loading background color & splash screen */
html, #messenger-splash-screen {
    background-color: #191724 !important;
}

/* thread list */
div[aria-label="Thread list"] {
    background-color: #1f1d2e !important;
}
div[aria-label="Thread list"] .x1ry3o7a {
    background-color: rgb(88, 72, 80) !important;
    border: 2px solid #ebbcca !important;
}

/* header & composer fade */
.x1u998qt {
    box-shadow: 0 0 20px 20px var(--mwp-header-background-color) !important;
}
div:has(> div[aria-label="Thread composer"]) {
    box-shadow: 0 0 20px 20px var(--chat-composer-background-color) !important;
    z-index: 1;
}
