@use "vars";
@use "scrollbar";

$body-color: var(--fg);
$body-bg: var(--canvas);

$link-hover-color: var(--accent-link);
$link-hover-decoration: none;

$utilities: (
    "opacity": (
        property: opacity,
        values: (
            0: 0,
            25: 0.25,
            50: 0.5,
            75: 0.75,
            100: 1,
        ),
    ),
);

@import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities";

/* Bootstrap "extensions" */
.flex-basis-100 {
    flex-basis: 100%;
}

.flex-basis-75 {
    flex-basis: 75%;
}

body {
    overscroll-behavior: none;
}

@include scrollbar.custom;

button {
    /* override transition for instant hover response */
    transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

pre,
code,
kbd,
samp {
    unicode-bidi: normal !important;
}

.isWin {
    --base-font-size: 12px;
}

.isMac {
    --base-font-size: 13px;
}

.isLin {
    --base-font-size: 14px;
}

[dir="rtl"] {
    .form-select {
        /* flip <select>'s arrow */
        background-position: left 0.75rem center;
    }
}

.night-mode .form-select:disabled {
    background-color: var(--fg-disabled);
}

.reduced-motion * {
    transition: none !important;
    animation: none !important;
}