gnosis-css/css/scss/base.scss

@use 'sass:math';

@import '../node_modules/bootstrap/scss/functions';

// override variables

@import './bootstrap/variables';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';

// override maps
@import './bootstrap/maps';

@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/root';

@import '../node_modules/bootstrap/scss/utilities';
@import '../node_modules/bootstrap/scss/reboot';

// override typography

@import './bootstrap/typography';
@import './bootstrap/accordion';
@import './bootstrap/nav';
@import './bootstrap/navbar';
@import './bootstrap/g-components/sidebar';

@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/reboot';
@import '../node_modules/bootstrap/scss/type';
@import '../node_modules/bootstrap/scss/images';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/tables';
@import '../node_modules/bootstrap/scss/forms';
@import '../node_modules/bootstrap/scss/buttons';
@import '../node_modules/bootstrap/scss/transitions';
@import '../node_modules/bootstrap/scss/dropdown';
@import '../node_modules/bootstrap/scss/button-group';

@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/accordion';
@import '../node_modules/bootstrap/scss/breadcrumb';
@import '../node_modules/bootstrap/scss/pagination';
@import './bootstrap/badge';
@import '../node_modules/bootstrap/scss/alert';
@import '../node_modules/bootstrap/scss/progress';
@import '../node_modules/bootstrap/scss/list-group';
@import '../node_modules/bootstrap/scss/close';
@import '../node_modules/bootstrap/scss/toasts';
@import '../node_modules/bootstrap/scss/modal';
@import '../node_modules/bootstrap/scss/tooltip';
@import '../node_modules/bootstrap/scss/popover';
@import '../node_modules/bootstrap/scss/carousel';
@import '../node_modules/bootstrap/scss/spinners';
@import '../node_modules/bootstrap/scss/offcanvas';
@import '../node_modules/bootstrap/scss/placeholders';
@import "../node_modules/bootstrap/scss/helpers";

@import './bootstrap/utilities';

@function contrast-ratio($color1, $color2) {
  $luminance1: luminance($color1);
  $luminance2: luminance($color2);

  @return if(
    $luminance1 > $luminance2,
    math.div($luminance1 + 0.05, $luminance2 + 0.05),
    math.div($luminance2 + 0.05, $luminance1 + 0.05)
  );
}

@function get-contrasting-text-color(
  $background-color,
  $light: #fff9e5,
  $dark: #33322e,
  $min-contrast-ratio: 4.5
) {
  $light-contrast: contrast-ratio($light, $background-color);
  $dark-contrast: contrast-ratio($dark, $background-color);

  @if ($dark-contrast >= $min-contrast-ratio) {
    @return $dark;
  } @else if ($light-contrast >= $min-contrast-ratio) {
    @return $light;
  } @else {
    @return if($light-contrast < $dark-contrast, #000000, #ffffff);
  }
}

@each $color, $hex in $all-colors {
  .bg-#{$color} {
    background-color: $hex;
    color: get-contrasting-text-color($hex);
  }
  .bg-gradient-x-#{$color} {
    --#{$prefix}gradient-start: 0%;
    --#{$prefix}gradient-end: 100%;
    --#{$prefix}gradient-to: transparent;

    @include gradient-x(
      $start-color: $hex,
      $end-color: var(--#{$prefix}gradient-to),
      $start-percent: var(--#{$prefix}gradient-start),
      $end-percent: var(--#{$prefix}gradient-end)
    );
  }
  .bg-gradient-y-#{$color} {
    --#{$prefix}gradient-start: 0%;
    --#{$prefix}gradient-end: 100%;
    --#{$prefix}gradient-to: transparent;

    @include gradient-y(
      $start-color: $hex,
      $end-color: var(--#{$prefix}gradient-to),
      $start-percent: var(--#{$prefix}gradient-start),
      $end-percent: var(--#{$prefix}gradient-end)
    );
  }
}

@each $color, $hex in $theme-colors {
  .bg-gradient-#{$color} {
    --#{$prefix}gradient-start: 0%;
    --#{$prefix}gradient-end: 100%;
    --#{$prefix}gradient-to: transparent;

    @include gradient-x(
      $start-color: $hex,
      $end-color: var(--#{$prefix}gradient-to),
      $start-percent: var(--#{$prefix}gradient-start),
      $end-percent: var(--#{$prefix}gradient-end)
    );
  }
}

@each $color, $hex in $all-colors {
  .border-#{$color} {
    --#{$prefix}border-color: #{$hex};
  }
}

@import "../node_modules/bootstrap/scss/utilities/api";

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

i {
  font-size: 1.5rem;
}

html,
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 0;
}

a {
  text-decoration-thickness: 2px;
}

@media (min-width: 992px) {
  .toc-margin {
    max-width: 70%;
    margin-left: 0;
  }
}