/* ---------------------------------------------------------------------------- */
/* Common rules, specific for UI elements (buttons, dialogs, etc) */

body {
    font-family: var(--default-font);
    background-color: var(--bg-color);
    color: var(--fg-color);
    user-select: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.box-shadow {
    box-shadow: var(--sh-color) 0 0 1ch 0;
}

.box-shadow-2 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    margin: 0.1rch 1rch 2.5rch;
}

.blur-background,
.shade-background {
    background-color: rgba(0, 0, 0, 0.336);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    backdrop-filter: blur(1.1rch);
    overflow: hidden;
    z-index: -1;
}

.shade-background {
    --opacity: 20%;

    backdrop-filter: none;
    background-color: color-mix(in srgb, var(--bg-color), transparent var(--opacity));
}

/* this outline is to fix borders when a blur overlay is laid on top */
.allow-blur {
    outline: 2ch solid var(--bg-color);
}

.dialog-window {
    --animate-duration: 350ms;

    border: var(--border-w) solid var(--fg-color);
    border-radius: var(--radius-big);
    background-color: var(--gray-dark-1);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    .header {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.5ch;

        border-bottom: var(--border-w) solid var(--fg-color);

        img {
            width: 5ch;
            aspect-ratio: 1 / 1;
            margin: 0 1.5ch 0 1ch;
        }

        > .msr-icon {
            font-size: 3rem;
            margin: 0 0.3ch 0 0.2ch;
        }

        .title {
            font-size: 2.3rem;
            font-weight: 500;
            display: inline-block;
            width: 100%;
        }

        .btn {
            font-size: 2.5em;
            color: var(--fg-color);
            padding: 0;
            display: flex;
        }

        .btn.close {
            color: var(--red);
        }
    }

    .body {
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1ch;

        overflow: auto;

        & > div {
            height: 100%;
        }
    }

    .message {
        font-size: 1.5em;
    }
}

/* Hide caret from Bootstrap dropdown buttons */
.dropdown-toggle.caret-off::after,
.dropdown-toggle.caret-off::before {
    display: none;
}

/* Show a checkbox on selected items of dropdown menus */
.dropdown-item {
    font-size: 1.2em;
}

.dropdown-item.checkbox {
    position: relative;
    padding-left: 2.5ch
}

.dropdown-item.checkbox.checked::before {
    position: absolute;
    left: 0.2ch;
    top: 0ch;
    content: "check";
    font-family: 'Material Symbols Rounded';
    font-weight: 900;
    font-size: 1.3em;
}

/* Adjust the icon on dropdown items */
.dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4ch;

    .msr-icon {
        font-size: 1.2em;
        font-variation-settings: 'wght' 700;
    }
}

/* Personalize the scrollbars */
div {
    scrollbar-color: var(--gray-dark-2) transparent;
}

div::-webkit-scrollbar {
    width: 1rch;
    height: 1rch;
}

div::-webkit-scrollbar-thumb {
    background: var(--gray-dark-2);
    border-radius: var(--radius-small);
}

div::-webkit-scrollbar-track {
    background: transparent;
}

/* Faster Animate.css animations */
.animate__quicker {
  --animate-duration: 150ms;
}

/* Buttons style */
.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2ch;
    padding: 1ch 2ch 2ch;
    font-size: 1rem;
}

.btn {
    --font-color: var(--fg-color);
    --back-color: transparent;
    --border-color: var(--fg-color);

    font-size: 1.5em;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1ch;
    padding: 0.4ch 1ch;
    border-radius: var(--radius-tiny);
    border: var(--line-w) solid var(--border-color);

    color: var(--font-color);
    background-color: var(--back-color);

    &.borderless {
        border: none;
    }
}

.btn > i {
    font-size: 1.5em;
}

.btn:hover,
.btn.active,
.btn.show {
    color: var(--font-color);
    background-color: var(--back-color);
    border-color: var(--border-color);
}

.btn.primary {
    --back-color: var(--blue);
    --font-color: var(--bg-color);
}

.btn.secondary {
    --back-color: var(--gray-dark-3);
}

.btn.danger {
    --back-color: var(--red-dark);
}

.btn.warning {
    --back-color: var(--yellow);
    --font-color: var(--bg-color);
}

.btn.success {
    --back-color: var(--green);
    --font-color: var(--bg-color);
}

.btn:disabled {
    --bs-btn-disabled-opacity: 0.45;
    background: var(--back-color);
}

.btn.glow,
.btn.glow-pulse {
    --size: var(--glow-size, 10px);
    box-shadow: 0 0 var(--size) var(--back-color);
}

.btn.glow-pulse {
    animation: pulse 2s infinite;

    @keyframes pulse {
        0% { box-shadow: 0 0 var(--size) var(--back-color); }
        50% { box-shadow: 0 0 calc(2 * var(--size)) var(--back-color); }
        100% { box-shadow: 0 0 var(--size) var(--back-color); }
    }
}

/* remove browser style from md2tags tags */
i.mk-1, i.mk-2, i.mk-3, i.mk-4 {
    font-style: normal;
    font-weight: bold;
}

/* hide the scrollbar */
.no-scrollbar {
    scrollbar-width: none;
    scroll-behavior: smooth;
}