.dark{
  --#{$variable-prefix}body: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}body-bg: #{map-get($dark-grays, '100')};
  --#{$variable-prefix}body-color: #{map-get($dark-grays, '700')};
  --#{$variable-prefix}headings-color: #{map-get($dark-grays, '900')};
  --#{$variable-prefix}border-color: #{rgba($white, 0.05)};

  /* --------------------------------- Shadow --------------------------------- */
  --#{$variable-prefix}box-shadow: #{0 7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2)};
  --#{$variable-prefix}box-shadow-sm: #{ 0 .125rem .25rem rgba($black, .075)};
  --#{$variable-prefix}box-shadow-lg: #{0 1rem 4rem rgba($black, 0.175)};
  --#{$variable-prefix}box-shadow-inset: #{inset 0 1px 2px rgba($black, .075)};
  
  // $grays-with-brand-color: map-merge($brand-colors, $dark-grays) !default;
  $theme-all-dark-colors: map_merge($dark-grays, $theme-dark-colors) !default;

  @each $color, $value in $theme-all-dark-colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

  @each $color, $value in $theme-dark-colors-soft {
    --#{$variable-prefix}soft-#{$color}: #{$value};
  }

  /* ---------------------------------- Form ---------------------------------- */
  --#{$variable-prefix}input-bg: #{$dark};
  --#{$variable-prefix}input-color: #{map-get($dark-grays, '900')};
  --#{$variable-prefix}input-border-color: #{map-get($dark-grays, '300')};
  --#{$variable-prefix}input-focus-border-color: #{shade-color($component-active-bg, 50%)};
  --#{$variable-prefix}input-placeholder-color: #{map-get($grays, '400')};

  --#{$variable-prefix}form-check-input-border-color: #{map-get($dark-grays, '400')};

  /* -------------------------------- Accordion ------------------------------- */
  --#{$variable-prefix}accordion-border-color: #{rgba($white, 0.125)};

  /* --------------------------------- Navbar --------------------------------- */
  --#{$variable-prefix}bg-navbar-glass: #{rgba(map-get($dark-grays, '100'), 0.96)};

  --#{$variable-prefix}navbar-dark-color: #{rgba($dark, .55)};
  --#{$variable-prefix}navbar-dark-hover-color: #{rgba($dark, .75)};
  --#{$variable-prefix}navbar-dark-active-color: #{$dark};
  --#{$variable-prefix}navbar-dark-disabled-color: #{rgba($dark, .25)};
  --#{$variable-prefix}navbar-dark-toggler-border-color:  #{rgba($dark, .1)};

  --#{$variable-prefix}navbar-light-color: #{rgba($white, .55)};
  --#{$variable-prefix}navbar-light-hover-color: #{rgba($white, .7)};
  --#{$variable-prefix}navbar-light-active-color: #{rgba($white, .9)};
  --#{$variable-prefix}navbar-light-disabled-color: #{rgba($white, .3)};
  --#{$variable-prefix}navbar-light-toggler-border-color: #{rgba($white, .1)};

  --#{$variable-prefix}navbar-light-brand-color: #{$navbar-light-active-color};
  --#{$variable-prefix}navbar-light-brand-hover-color: #{$navbar-light-active-color};
  --#{$variable-prefix}navbar-dark-brand-color: #{$navbar-dark-active-color};
  --#{$variable-prefix}navbar-dark-brand-hover-color: #{$navbar-dark-active-color};

  --#{$variable-prefix}navbar-light-brand-color: #{map-get($theme-dark-colors, 'primary')};
  --#{$variable-prefix}navbar-dark-brand-color: #{map-get($theme-dark-colors, 'primary')};
  
  /* -------------------------------------------------------------------------- */
  /*                               Navbar Vertical                              */
  /* -------------------------------------------------------------------------- */

  /* --------------------------------- Default -------------------------------- */
  --#{$variable-prefix}navbar-vertical-collapsed-hover-shadow-color: #{rgba($black, 0.2)};
  --#{$variable-prefix}navbar-vertical-bg-color: var(--#{$variable-prefix}bg-navbar-glass);
  --#{$variable-prefix}navbar-vertical-link-color: #{map-get($dark-grays, '700')};
  --#{$variable-prefix}navbar-vertical-link-hover-color: #{map-get($dark-grays, '1000')};
  --#{$variable-prefix}navbar-vertical-link-active-color: #{map-get($theme-colors, 'primary')};
  --#{$variable-prefix}navbar-vertical-link-disable-color: #{map-get($dark-grays, '400')};
  --#{$variable-prefix}navbar-vertical-hr-color: #{rgba($white, 0.08)};
  --#{$variable-prefix}navbar-vertical-scrollbar-color: #{rgba(map-get($dark-grays, '600'), 0.3)};

  /* ----------------------------- Navbar Inverted ---------------------------- */



  /* --------------------------- End Navbar Vertical -------------------------- */

  /* -------------------------------- Dropdown -------------------------------- */
  --#{$variable-prefix}dropdown-bg: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}dropdown-color: #{map-get($dark-grays, '300')};
  // --#{$variable-prefix}dropdown-border-color: #{rgba($white, 0.075)};
  --#{$variable-prefix}dropdown-box-shadow: #{$box-shadow};
  --#{$variable-prefix}dropdown-link-color: #{map-get($dark-grays, '900')};
  --#{$variable-prefix}dropdown-link-hover-color: #{lighten(map-get($dark-grays, '900'), 5%)};
  --#{$variable-prefix}dropdown-link-hover-bg: #{rgba(map-get($dark-grays, '100'), 0.4)};
  --#{$variable-prefix}dropdown-link-active-color: #{$component-active-color};
  --#{$variable-prefix}dropdown-link-active-bg: #{$component-active-bg};
  --#{$variable-prefix}dropdown-link-disabled-color: #{map-get($dark-grays, '600')};
  --#{$variable-prefix}dropdown-header-color: #{map-get($dark-grays, '600')};
  // --#{$variable-prefix}dropdown-dark-color: #{map-get($dark-grays, '300')};
  // --#{$variable-prefix}dropdown-dark-bg: #{map-get($dark-grays, '800')};
  // --#{$variable-prefix}dropdown-dark-border-color: #{$dropdown-border-color};
  // --#{$variable-prefix}dropdown-dark-divider-bg: #{$dropdown-divider-bg};
  // --#{$variable-prefix}dropdown-dark-box-shadow: null;
  // --#{$variable-prefix}dropdown-dark-link-color: #{$dropdown-dark-color};
  // --#{$variable-prefix}dropdown-dark-link-hover-color: #{$white};
  // --#{$variable-prefix}dropdown-dark-link-hover-bg: #{rgba($white, .15)};
  // --#{$variable-prefix}dropdown-dark-link-active-color: #{$dropdown-link-active-color};
  // --#{$variable-prefix}dropdown-dark-link-active-bg: #{$dropdown-link-active-bg};
  // --#{$variable-prefix}dropdown-dark-link-disabled-color: #{map-get($dark-grays, '500')};
  // --#{$variable-prefix}dropdown-dark-header-color: #{map-get($dark-grays, '500')};

  /* ------------------------------- Pagination ------------------------------- */
  --#{$variable-prefix}pagination-color: #{$white};
  --#{$variable-prefix}pagination-bg: #{$dark};
  --#{$variable-prefix}pagination-border-color: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}pagination-hover-color: #{$white};
  --#{$variable-prefix}pagination-disabled-bg: #{$dark};

  /* ---------------------------------- Card ---------------------------------- */
  --#{$variable-prefix}card-border-color: #{rgba($white, 0.125)};
  --#{$variable-prefix}card-cap-bg: #{rgba(map-get($dark-grays, '200'), 0.03)};
  // --#{$variable-prefix}card-bg: #{rgba(map-get($dark-grays, '200'), 0.25)};
  // --#{$variable-prefix}card-header-bg: #{map-get($dark-grays, '300')};
  --#{$variable-prefix}card-bg: #121e2d;

  /* --------------------------------- Popover -------------------------------- */
  --#{$variable-prefix}popover-bg: #{$dark};
  --#{$variable-prefix}popover-border-color: #{rgba($white, .2)};
  // --#{$variable-prefix}popover-box-shadow: #{$box-shadow};
  --#{$variable-prefix}popover-header-bg: #{map-get($theme-dark-colors, 'light')};
  --#{$variable-prefix}popover-header-border-bottom-color: #{tint-color($dark, 16%)}; //black
  // --#{$variable-prefix}popover-header-color: #{$headings-color};
  // --#{$variable-prefix}popover-body-color: #{$body-color};
  --#{$variable-prefix}popover-arrow-color: #{$dark};
  --#{$variable-prefix}popover-arrow-outer-color: #{fade-in(rgba($white, .2), .05)};

  /* ---------------------------------- Modal --------------------------------- */
  --#{$variable-prefix}modal-content-bg: #{$dark};

  /* ------------------------------ Reveal Button ----------------------------- */
  --#{$variable-prefix}btn-reveal-color: #{dark};
  --#{$variable-prefix}btn-reveal-bg: #{shade-color($dark, 10%)};
  --#{$variable-prefix}btn-reveal-border-color: #{shade-color($dark, 12.5%)};

  /* ------------------------------ Falcon Button ----------------------------- */

  --#{$variable-prefix}btn-falcon-background: var(--#{$variable-prefix}body-bg);
  --#{$variable-prefix}btn-disabled-color: #4d5969;
  --#{$variable-prefix}btn-falcon-box-shadow: #{0 0 0 1px rgba(0,8,19,.3), 0 2px 5px 0 rgba(0,13,33,.5), 0 1px 1.5px 0 rgba(0,8,1,.48), 0 1px 2px 0 rgba(0,8,1,.4)};
  --#{$variable-prefix}btn-falcon-hover-box-shadow: #{0 0 0 1px rgba(0,8,19,.3),0 3px 7px 0 rgba(0,13,33,.8),0 1px 1.5px 0 #000801,0 1px 2px 0 #000801};

  --#{$variable-prefix}btn-falcon-default-color: #{map-get($dark-grays, '800')};
  --#{$variable-prefix}btn-falcon-default-hover-color: #{shift-color(map-get($dark-grays, '800'), -17%)};
  --#{$variable-prefix}btn-falcon-default-active-background: #{shade-color($dark, 10%)};
  --#{$variable-prefix}btn-falcon-default-active-border: #{shift-color(map-get($dark-grays, '800'), -17%)};


  
  @each $color, $value in $theme-dark-colors {

    /* ------------------------------ Falcon button ----------------------------- */

    --#{$variable-prefix}btn-falcon-#{$color}-color: var(--#{$variable-prefix}#{$color});
    --#{$variable-prefix}btn-falcon-#{$color}-hover-color: #{shift-color($value, -17%)};
    --#{$variable-prefix}btn-falcon-#{$color}-active-background: #{shade-color($dark, 40%)};
    --#{$variable-prefix}btn-falcon-#{$color}-active-color: #{shift-color($value, -17%)};

    /* ---------------------------------- Alert --------------------------------- */
    --#{$variable-prefix}alert-#{$color}-background: #{rgba(shift-color($value, 60%), 0.6)};
    --#{$variable-prefix}alert-#{$color}-border-color: #{shift-color($value, -$alert-border-scale)};
    --#{$variable-prefix}alert-#{$color}-color: #{shift-color($value, -$alert-color-scale)};
    --#{$variable-prefix}alert-#{$color}-link-color: #{tint-color($value, 20%)};

    /* ------------------------------- List Group ------------------------------- */
    --#{$variable-prefix}list-group-item-#{$color}-background: #{shift-color($value, -$list-group-item-bg-scale)};
    --#{$variable-prefix}list-group-item-#{$color}-color: #{shift-color($value, -$list-group-item-color-scale)};
      
    /* ---------------------------------- Badge --------------------------------- */
    --#{$variable-prefix}badge-soft-#{$color}-background-color: #{shift-color($value, 80%)};
    @if $color == 'secondary' {
      --#{$variable-prefix}badge-soft-#{$color}-color: #{shift-color($value, 6.4%)};
    } @else if $value == 'warning' {
      --#{$variable-prefix}badge-soft-#{$color}-color: #{shift-color($value, -20%)};
    } @else if $value == 'danger' {
      --#{$variable-prefix}badge-soft-#{$color}-color: #{shift-color($value, -36%)};
    } @else {
      --#{$variable-prefix}badge-soft-#{$color}-color: #{shift-color($value, -36%)};
    }
  }

  --#{$variable-prefix}transparent-50: #{rgba($dark, 0.5)};

  /* ------------------------------- List Group ------------------------------- */
  --#{$variable-prefix}list-group-bg: var(--#{$variable-prefix}card-cap-bg);
  --#{$variable-prefix}list-group-action-hover-color: #{map-get($dark-grays, '700')};
  --#{$variable-prefix}list-group-hover-bg: #{map-get($dark-grays, '100')};

  /* ---------------------------------- Table --------------------------------- */
  --#{$variable-prefix}table-border-color: #{map-get($dark-grays, '100')};
  @each $color, $value in $theme-colors {
    --#{$variable-prefix}table-#{$color}-bg: #{shift-color($value, -$table-bg-scale)};
    --#{$variable-prefix}table-#{$color}-color: #{color-contrast(opaque(map-get($dark-grays, '200'), $value))};
    --#{$variable-prefix}table-#{$color}-hover-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-hover-bg-factor))};
    --#{$variable-prefix}table-#{$color}-hover-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-hover-bg-factor)))};
    --#{$variable-prefix}table-#{$color}-striped-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-striped-bg-factor))};
    --#{$variable-prefix}table-#{$color}-striped-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-striped-bg-factor)))};
    --#{$variable-prefix}table-#{$color}-active-bg: #{mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-active-bg-factor))};
    --#{$variable-prefix}table-#{$color}-active-color: #{color-contrast(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-active-bg-factor)))};
    --#{$variable-prefix}table-#{$color}-border-color: #{rgba(mix(color-contrast(opaque(map-get($dark-grays, '200'), $value)), $value, percentage($table-border-factor)), 0.05)};
  }
  .table {
    --#{$variable-prefix}table-striped-bg: #{map-get($dark-grays, '100')};
  }

  /* --------------------------------- Avarar --------------------------------- */
  --#{$variable-prefix}avatar-status-border-color: #{$dark};
  --#{$variable-prefix}avatar-name-bg: #{map-get($dark-grays, '400')};
  --#{$variable-prefix}avatar-button-bg: #{map-get($dark-grays, '400')};
  --#{$variable-prefix}avatar-button-hover-bg: #{map-get($dark-grays, '500')};
  
  /* ------------------------------ Notification ------------------------------ */
  --#{$variable-prefix}notification-bg: var(--#{$variable-prefix}card-cap-bg);
  --#{$variable-prefix}notification-title-bg: #{map-get($dark-grays, '300')};
  --#{$variable-prefix}notification-unread-bg: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}notification-unread-hover-bg: #{darken(map-get($dark-grays, '200'), 5%)};
  --#{$variable-prefix}notification-indicator-border-color: #0a1727;

  /* --------------------------------- Kanban --------------------------------- */
  --#{$variable-prefix}kanban-bg: #{rgba(map-get($dark-grays, '200'), 0.25)};
  --#{$variable-prefix}kanban-item-bg: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}kanban-item-color: #{map-get($dark-grays, '900')};
  --#{$variable-prefix}kanban-btn-add-hover-bg: #{map-get($dark-grays, '200')};
  --#{$variable-prefix}kanban-draggable-source-dragging-bg: #{map-get($dark-grays, '100')};
  --#{$variable-prefix}kanban-bg-attachment-bg: #{map-get($dark-grays, '300')};
  --#{$variable-prefix}kanban-footer-color: #{map-get($dark-grays, '600')};
  --#{$variable-prefix}kanban-nav-link-card-details-color: #{map-get($dark-grays, '700')};
  --#{$variable-prefix}kanban-nav-link-card-details-hover-bg: #{map-get($dark-grays, '300')};

  /* --------------------------- Gradient Background -------------------------- */
  --#{$variable-prefix}bg-shape-bg: #01224b;
  --#{$variable-prefix}bg-shape-bg-ltd: #{linear-gradient(-45deg,rgba(20,58,101,.41),#053571)};
  --#{$variable-prefix}bg-shape-bg-dtl: #{linear-gradient(-45deg,#0a3b79,rgba(9,25,43,.41))};

  --#{$variable-prefix}line-chart-gradient: #{linear-gradient(45deg,#012552,#001835)};
  --#{$variable-prefix}card-gradient: #{linear-gradient(45deg,#012552,#001835)};
  --#{$variable-prefix}bg-circle-shape: #{linear-gradient(-45deg,rgba(9,25,43,.41),#0a3b79)};
  --#{$variable-prefix}bg-circle-shape-bg: #4695ff;
  --#{$variable-prefix}modal-shape-header: #{linear-gradient(-45deg,#012552,#001835)};
  --#{$variable-prefix}modal-shape-header-after: #{linear-gradient(-45deg,rgba(20,58,101,.41),#053571)};
  --#{$variable-prefix}modal-shape-header-bg: #01224b;

  /* ------------------------------ Full Calendar ----------------------------- */
  // --fc-button-bg-color: #{map-get($dark-grays, '900')};
  // --fc-button-border-color: #{map-get($dark-grays, '900')};
  // --fc-button-hover-bg-color: #{$dark};
  // --fc-button-hover-border-color: #{$dark};
  // --fc-button-active-bg-color: #{$dark};
  // --fc-button-active-border-color: #{$dark};
  --fc-button-list-day-cushion: #{$dark};
  --fc-page-bg-color: #{$dark};
  --fc-neutral-bg-color: #{map-get($dark-grays, '200')};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$variable-prefix}flatpickr-calendar-bg: #{$dark};

  /* -------------------------------- Flatpickr ------------------------------- */
  --#{$variable-prefix}leaflet-bar-bg: #{map-get($dark-grays, '300')};
  --#{$variable-prefix}leaflet-popup-content-wrapper-bg: #{$dark};

  /* --------------------------------- Choices -------------------------------- */
  --#{$variable-prefix}choices-item-has-no-choices-bg: #{$dark};

  /* -------------------------------- Thumbnail ------------------------------- */
  --#{$variable-prefix}thumbnail-bg: #{map-get($dark-grays, '200')};

  /* ---------------------------------- Chat ---------------------------------- */
  --#{$variable-prefix}chat-contact-bg: var(--#{$variable-prefix}card-bg);

  /* --------------------------------- Tinymce -------------------------------- */
  --#{$variable-prefix}tinymce-bg: #{$dark};

  /* --------------------------------- Swiper --------------------------------- */
  --#{$variable-prefix}swiper-nav-bg: #{rgba($dark, 0.8)};

  /* --------------------------------- Rater --------------------------------- */
  --#{$variable-prefix}star-rating-bg-image: #{url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFdElEQVR4nO2aXWxURRTH/2dut58Imho1SgStuit+vBo0BkgkRjDog+VBiJEXqJhKK21x+7EdUu5u2W1Uqi8Qo4YQY6gQDQlRn9RENGoMD0a7RCzGRCJGBLRF9mOOD+waKHe7e2f23mt0f4/zceY/Z2fmzJm7QI0aNWr8j6EgBu3sHG9oXHC2gxQvJ/CUhbpUPD5wMggtwv8hmZrmn3mHmF8G4XEm6s5R/kinlPP91xKAA7YN2A8CeHRW8eLmrOjwWwsQgAMYqs+xnLGls3O8wW89vjqgp1/eDWC1YyXhxqYFvz/ppx7AZwcIsnrmbMDUK6X0V5NfA/VJuRDgdWWa3Tmds1b5IqiAf97OUReAunLNCOx4RniFL/eALimvrs+KnwDMq6yHWJq0Bz/3VFRxJD8GabgY4iqcPABWvd6puRzPV4CUsnEmK6YA3OCiG1tKRRIJecwrXUU8XwHTGbEe7iYPAJQXYqsXeq4YyEvjUkoxkxXfAbhDo/uFOrYWxeMDv1Rb16V4ugJmctYa6E0eABpyItdZTT1OeLwFDEMa02YpZeWHpwaeOaBncOQhMJYamrnmvMdJUtXOgI0bd4daW0+25S0rAoV7iLiHgWqkuDkChjik9ibl8EmAuAo2/8G1A7ZKea24IMJkcQRAmJkiBIQBtAGwqiluNgScU4w0EU2CkWZSk8ycnleP76WUf2nadCYajbfmrfwDxIWJgiMAhQG06k7AQxSAEwAmiTnNRJMEMWkxpePx/lNzrRpHB7wwOLJcMR+Cm9vbv5cZAK81h1S3lFLNrnQ8BBVjF/4bkweAZgDPnc+IJ5wqS0QBDnsoKBAYdLtTubMDCF95qiYAhMUfOpY7FSqlOgCc9lSRjzDR86MjsS+d6hwdMBaX3zCrlQDOeKrMBwiIpnYMvVSqvuRNMBWXXwPiYQB/eKLMBxgY3mnHRudqM+dVOGkPfsEKjwCYrqoyHyAgnrKHRipoV57CveAwgCZjZT7AwFjKHuqr5Npc8VW4r3/7ShAdAuD7xwuXjCftoa5KcwZXuUDv4MgqYn4XQEhLmscw8+5UPPaMm4TJVTqc2jF0GERrAeRcq/MceqOlnje7zRa10uHege3tBHobgXxdvhIm7DuRjjw9MbE277av1gRS9vAEwE8BqGpurgVhf0ud2qAz+YvdDegb3L4BTK+b2DCBgffO/np9+549m7K6NoweMD795KOj9y9bcRsB95rY0SRTp+qW7drV/aeJEeM9TMzvm9rQg48mEv2/mVoxP8RYLDa2oYWor4oVYwuEu6qgQwOOtLfvN36DrEIY4yXmNrRobGv79hZTI0YOKPwCEVMRurBFxqvPyAGLw+lbEWBuoBCwAwhB7f/i+GS8/YwcwBzY/i8S7AoILgIUMY8EZluAzZegIY2Fc0gbbQdc9DwHFgGKCFZGP4K2AwoxuFGz+xkCehFSNxHzKoCO6uowjQRl/7dXCs0YnCXmVwWH7Evu8T9LKT+Yzoj1BNggLHRl0fAc0ncAiyVuHl8INKEI0aQdOz67rvDRcm9394sToabpLhBHAVxVkV02c4D2e0DfwMi+Cv76CoCPKEU9Y4nYZ5Xa7pHyOpEVwwA2oXzKfmHqWKRF90FEewVUkAMcZ/C2lB076PadbkzKUwCejUblK3kSO0FYM0fzhkXh9M0AptyMUcQkDJY6AE8D2NIcUktS9vABk7+0JBJyMhmPPcYKywEu9cGWQ3nrnO4Y2g5gYN+sogyIU5mQakvasXEpZUbX9mxSidjHzSG+jxjrAPx4eS29afIwor0FWkJq9HzOOsvMq5n5B0vx2OioPKFrrxyFg/ItKeXBmazoAGMFQEea6/MlP3zWqFGjRo0y/A3lxcMNXfCjjAAAAABJRU5ErkJggg==')};

  /* ---------------------------------- Toast --------------------------------- */
  --#{$variable-prefix}toast-background-color: #{rgba(map-get($dark-grays, '300'), 0.3)};

  /* --------------------------------- Wizard --------------------------------- */
  --#{$variable-prefix}theme-wizard-nav-item-circle-bg: #{$dark};

  /* -------------------------------- Card Span ------------------------------- */
  --#{$variable-prefix}card-span-img-bg: #{$dark};
  --#{$variable-prefix}card-span-img-box-shadow: #{$box-shadow-sm};
  --#{$variable-prefix}card-span-img-hover-box-shadow: #{$box-shadow};

  /* ------------------------------ Emoji Picker ------------------------------ */
  &.emoji-picker{
    --dark-background-color: #{map-get($dark-grays, '200')};
    --dark-hover-color: #{map-get($dark-grays, '300')};
    --dark-border-color: #{map-get($dark-grays, '300')};
    --dark-search-background-color: $input-bg;
    --dark-search-border-color: #{map-get($dark-grays, '300')};
    --search-icon-color: #{map-get($dark-grays, '400')};
    --dark-category-button-color: #{map-get($dark-grays, '700')};
    --dark-secondary-text-color: #{map-get($dark-grays, '600')};
  }

  /* ------------------------------ showcase-page ------------------------------ */
  --#{$variable-prefix}setting-toggle-shadow: #{0 -7px 14px 0 rgba(3, 12, 51, 0.15), 0 3px 6px 0 rgba(0, 0, 0, 0.2)};

  /* -------------------------------- Scrollbar ------------------------------- */
  --#{$variable-prefix}scrollbar-bg: #{rgba($gray-900, 0.6)};;

  /* ------------------------------- Falcon Pill ------------------------------ */
  --#{$variable-prefix}nav-pills-falcon-active-bg-color: #{map-get($dark-grays, '100')};

  /* ------------------------------- Custom disabled button ------------------------------ */
  --#{$variable-prefix}btn-disabled-custom-background: #{rgba($dark, 0.65)};
  --#{$variable-prefix}btn-disabled-custom-color: #{rgba($white, 0.2)};
}