Sass Customization

/**
 * Color system variables
 */
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

/**
 * Theme color variables
 */
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

/**
 * Body and text variables
 */
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;

/**
 * Link variables
 */
$link-color: $primary !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;

/**
 * Global options
 */
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default;

// Custom color scheme
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Enable shadows and gradients
$enable-shadows: true;
$enable-gradients: true;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

/**
 * Spacing scale
 */
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,    // 0.25rem
  2: $spacer * 0.5,     // 0.5rem
  3: $spacer,           // 1rem
  4: $spacer * 1.5,     // 1.5rem
  5: $spacer * 3,       // 3rem
) !default;

/**
 * Position values for utilities
 */
$position-values: (
  0: 0,
  50: 50%,
  100: 100%
) !default;

/**
 * Component sizing
 */
$border-width: 1px !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
) !default;

$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, 0.175) !default;

$border-radius: 0.375rem !default;
$border-radius-xs: 0.125rem !default;
$border-radius-sm: 0.25rem !default;
$border-radius-lg: 0.5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 50rem !default;

/**
 * Box shadow variables
 */
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;

/**
 * Grid breakpoints
 */
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

/**
 * Container max widths
 */
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;

/**
 * Grid variables
 */
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

$gutters: $spacers !default;

/**
 * Container padding
 */
$container-padding-x: $grid-gutter-width * 0.5 !default;

// Custom breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

// Custom container sizes
$container-max-widths: (
  sm: 460px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1400px
);

// Custom spacing scale
$spacers: (
  0: 0,
  1: 0.125rem,
  2: 0.25rem,
  3: 0.5rem,
  4: 1rem,
  5: 2rem,
  6: 4rem
);

/**
 * Font families
 */
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: var(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$prefix}font-monospace) !default;

/**
 * Font sizes
 */
$font-size-root: null !default;
$font-size-base: 1rem !default; // 16px
$font-size-sm: $font-size-base * 0.875 !default; // 14px
$font-size-lg: $font-size-base * 1.25 !default; // 20px

$font-sizes: (
  1: $font-size-base * 2.5,     // 40px
  2: $font-size-base * 2,       // 32px
  3: $font-size-base * 1.75,    // 28px
  4: $font-size-base * 1.5,     // 24px
  5: $font-size-base * 1.25,    // 20px
  6: $font-size-base            // 16px
) !default;

/**
 * Font weights
 */
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;

$font-weight-base: $font-weight-normal !default;

/**
 * Line heights
 */
$line-height-base: 1.5 !default;
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;

/**
 * Headings
 */
$headings-margin-bottom: $spacer * 0.5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;

$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

/**
 * Button variables
 */
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default;

$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-font-size-sm: $input-btn-font-size-sm !default;

$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;

$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: 0.65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;

/**
 * Form variables
 */
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;

$input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default;

$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;

$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;

/**
 * Modal variables
 */
$modal-inner-padding: $spacer !default;

$modal-footer-margin-between: 0.5rem !default;

$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;

$modal-title-line-height: $line-height-base !default;

$modal-content-color: null !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;

$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: 0.5 !default;

$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default;
$modal-header-padding-x: $modal-inner-padding !default;

$modal-sm: 300px !default;
$modal-md: 500px !default;
$modal-lg: 800px !default;
$modal-xl: 1140px !default;

/**
 * Navbar variables
 */
$navbar-padding-y: $spacer * 0.5 !default;
$navbar-padding-x: null !default;

$navbar-nav-link-padding-x: 0.5rem !default;

$navbar-brand-font-size: $font-size-lg !default;
$navbar-brand-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-brand-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-font-size * $line-height-base) * 0.5 !default;
$navbar-brand-margin-end: 1rem !default;

$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;

/**
 * Theme colors map
 */
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
) !default;

/**
 * Color utilities map
 */
$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "black": $black,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

/**
 * RGB color maps (for CSS custom properties)
 */
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
$colors-rgb: map-loop($colors, to-rgb, "$value") !default;

// Add custom colors to theme
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
  "danger": #dc3545,
  "light": #f8f9fa,
  "dark": #343a40,
  "custom": #6f42c1  // Custom color
);

// This automatically generates:
// .text-custom, .bg-custom, .border-custom, .btn-custom, etc.

/**
 * Utilities map for generating utility classes
 */
$utilities: (
  "align": (
    property: vertical-align,
    class: align,
    values: baseline top middle bottom text-bottom text-top
  ),
  "float": (
    responsive: true,
    property: float,
    class: float,
    values: (
      start: left,
      end: right,
      none: none,
    )
  ),
  "interact": (
    property: pointer-events,
    class: pe,
    values: none auto,
  ),
  "overflow": (
    property: overflow,
    values: auto hidden visible scroll,
  ),
  "display": (
    responsive: true,
    print: true,
    property: display,
    class: d,
    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
  ),
  "shadow": (
    property: box-shadow,
    class: shadow,
    values: (
      null: $box-shadow,
      sm: $box-shadow-sm,
      lg: $box-shadow-lg,
      none: none,
    )
  ),
  "position": (
    property: position,
    values: static relative absolute fixed sticky
  ),
  "top": (
    property: top,
    values: $position-values
  ),
  "bottom": (
    property: bottom,
    values: $position-values
  ),
  "start": (
    property: left,
    class: start,
    values: $position-values
  ),
  "end": (
    property: right,
    class: end,
    values: $position-values
  ),
  "translate-middle": (
    property: transform,
    class: translate-middle,
    values: (
      null: translate(-50%, -50%),
      x: translateX(-50%),
      y: translateY(-50%),
    )
  )
  // ... many more utilities
) !default;

// Add custom utility
$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

// This generates: .cursor-auto, .cursor-pointer, .cursor-grab
// And responsive variants: .cursor-sm-pointer, .cursor-md-grab, etc.

/**
 * Root-level CSS custom properties
 */
:root {
  /* Color system */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;

  /* Theme colors */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* RGB variants for alpha transparency */
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  /* ... and more */

  /* Typography */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Body styling */
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;

  /* Link styling */
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;

  /* Border */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-radius: 0.375rem;
}

/**
 * Component-specific custom properties
 */
.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: tint-color(var(--bs-primary), 90%);
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: var(--bs-modal-header-padding-y) var(--bs-modal-header-padding-x);
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: var(--bs-body-bg);
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
}

.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: 0;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-gray-900);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
}

/**
 * Dark mode color scheme
 */
[data-bs-theme="dark"] {
  color-scheme: dark;
  
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  
  --bs-emphasis-color: #f8f9fa;
  --bs-emphasis-color-rgb: 248, 249, 250;
  
  --bs-secondary-color: #6c757d;
  --bs-secondary-color-rgb: 108, 117, 125;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  
  --bs-tertiary-color: #495057;
  --bs-tertiary-color-rgb: 73, 80, 87;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

/* Using CSS custom properties in your custom CSS */
.my-component {
  background-color: var(--bs-primary);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: var(--bs-spacer-3);
}

/* Override a custom property for dark mode */
[data-bs-theme="dark"] .my-component {
  --bs-primary: #4dabf7;
}

/* Component-level customization */
.my-modal {
  --bs-modal-width: 800px;
  --bs-modal-bg: #f8f9fa;
}

<!-- Dark mode for entire page -->
<html data-bs-theme="dark">

<!-- Dark mode for specific section -->
<div data-bs-theme="dark">
  <div class="card">...</div>
</div>

<!-- Dynamic theme switching with JavaScript -->
<script>
document.documentElement.setAttribute('data-bs-theme', 'dark');
</script>

/**
 * Color functions
 */
@function tint-color($color, $percentage) { /* Lighten color */ };
@function shade-color($color, $percentage) { /* Darken color */ };
@function shift-color($color, $percentage) { /* Shift color lighter/darker */ };
@function color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio) { /* Calculate contrasting color */ };

/**
 * Math functions
 */
@function add($value1, $value2, $return-calc: true) { /* Add values */ };
@function subtract($value1, $value2, $return-calc: true) { /* Subtract values */ };
@function divide($dividend, $divisor, $precision: 12) { /* Divide values */ };

/**
 * Responsive mixins
 */
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { /* Min-width media query */ };
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { /* Max-width media query */ };
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { /* Range media query */ };

/**
 * Button generation mixin
 */
@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) { /* Generate button variant styles */ };

/**
 * Grid mixins
 */
@mixin make-container($gutter: $container-padding-x) { /* Create container */ };
@mixin make-row($gutter: $grid-gutter-width) { /* Create row */ };
@mixin make-col-ready() { /* Prepare column */ };
@mixin make-col($size: false, $columns: $grid-columns) { /* Create column */ };
@mixin make-col-auto() { /* Create auto-sizing column */ };
@mixin make-col-offset($size, $columns: $grid-columns) { /* Create column offset */ };

// _custom.scss
$primary: #007bff;
$enable-shadows: true;
$border-radius: 0.5rem;

@import "bootstrap/scss/bootstrap";

// Core (always required)
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";

// Optional components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";

// Utilities
@import "bootstrap/scss/utilities/api";

// Custom button variant
.btn-purple {
  @include button-variant(#6f42c1, #6f42c1);
}

// Custom utility
$utilities: map-merge(
  $utilities,
  (
    "opacity": (
      property: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    )
  )
);