@use "vars" as *; @use "root-vars"; @use "button-mixins" as button; $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; } 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; } .reduced-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); } }