anki/sass/base.scss

@use "vars" as *;
@use "root-vars";
@use "button-mixins" as button;
@use "sass/scrollbar";

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

$link-hover-color: color(fg-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%;
}

html,
body {
    height: 100%;
}

html {
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    &:not(.isMac),
    &:not(.isMac) * {
        @include scrollbar.custom;
    }
    &.reduce-motion,
    &.reduce-motion * {
        transition: none !important;
        animation: none !important;
    }
    &.no-blur * {
        backdrop-filter: none !important;
    }
    &:not(.fancy),
    &:not(.fancy) * {
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
}

button {
    /* override transition for instant hover response */
    transition: color var(--transition) ease-in-out, box-shadow var(--transition) ease-in-out !important;
    border-radius: prop(border-radius);
    @include button.base;
}

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

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

label,
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}
input[type="text"] {
    border-radius: prop(border-radius);
    outline: none;
    border: 1px solid color(border);
    &:focus {
        border-color: color(border-focus);
    }
}