html[data-theme="dark"] {
  $black-hue: 215;
  $black-saturation: 18%;

  $black: hsl(0, 0%, 95%) !default;
  $black-bis: hsl(0, 0%, 83%) !default;
  $black-ter: hsl(0, 0%, 81%) !default;

  $grey-darker: hsl(0, 0%, 78%) !default;
  $grey-dark: hsl(0, 0%, 63%) !default;
  $grey: hsl(0, 0%, 48%) !default;
  $grey-light: hsl($black-hue, $black-saturation, 35%) !default;
  $grey-lighter: hsl($black-hue, $black-saturation, 27%) !default;
  $grey-lightest: hsl($black-hue, $black-saturation, 21%) !default;

  $white-ter: hsl($black-hue, $black-saturation, 20%) !default;
  $white-bis: hsl($black-hue, $black-saturation, 13%) !default;
  $white: hsl($black-hue, $black-saturation, 10%) !default;

  $diff-add-bg-light: rgba(70, 149, 74, 0.15);
  $diff-add-bg-dark: rgba(70, 149, 74, 0.4);
  $diff-del-bg-light: rgba(229, 83, 75, 0.1);
  $diff-del-bg-dark: rgba(229, 83, 75, 0.4);

  $shadow:
    0 0.5em 1em -0.125em rgba(0, 0, 0, 0.7),
    0 1px 2px 0 rgba(0, 0, 0, 0.7);

  $card-header-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7);

  &:root {
    color-scheme: dark;
    --fa-border-color: hsl(0, 0%, 15%);
  }

  @import "./app.scss";

  background: $white-bis;

  @include mobile {
    .navbar-menu {
      box-shadow: $shadow !important;
    }
  }

  &.paisa {
    .box {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7);
    }

    navbar.is-spaced .navbar-dropdown,
    .navbar-dropdown.is-boxed {
      box-shadow: $shadow;
    }

    .nested.has-dropdown {
      .dropdown-menu {
        .dropdown-content {
          box-shadow: $shadow;
        }
      }
    }

    .tippy-box[data-theme~="light"] {
      color: $grey-darker;
      background-color: $white;
      box-shadow: $shadow;
    }

    .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
      border-top-color: $white;
    }
    .tippy-box[data-theme~="light"][data-placement^="bottom"] > .tippy-arrow:before {
      border-bottom-color: $white;
    }
    .tippy-box[data-theme~="light"][data-placement^="left"] > .tippy-arrow:before {
      border-left-color: $white;
    }
    .tippy-box[data-theme~="light"][data-placement^="right"] > .tippy-arrow:before {
      border-right-color: $white;
    }
    .tippy-box[data-theme~="light"] > .tippy-backdrop {
      background-color: $white;
    }
    .tippy-box[data-theme~="light"] > .tippy-svg-arrow {
      fill: $white;
    }

    .tag.invertable:not(body) {
      @each $name, $pair in $tag-colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name} {
          background-color: $color-invert;
          color: $color;
          // If a light and dark colors are provided
          @if length($pair) > 3 {
            $color-light: nth($pair, 3);
            $color-dark: nth($pair, 4);
            &.is-light {
              background-color: $color-dark;
              color: $color-light;
            } // Sizes
          }
        }
      }
    }

    .notification {
      @each $name, $pair in $notification-colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name} {
          background-color: $color;
          color: $color-invert;
          // If light and dark colors are provided
          @if length($pair) >= 4 {
            $color-light: nth($pair, 3);
            $color-dark: nth($pair, 4);
            &.is-light.invertable {
              background-color: $color-dark;
              color: $color-light;
            }
          }
        }
      }
    }

    .button {
      @each $name, $pair in $button-colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &.is-#{$name} {
          @if length($pair) >= 4 {
            $color-light: nth($pair, 3);
            $color-dark: nth($pair, 4);
            &.invertable.is-light {
              background-color: $color-dark;
              color: $color-light;
              &:hover,
              &.is-hovered {
                background-color: $color-dark;
                border-color: transparent;
                color: bulmaDarken($color-light, 2.5%);
              }
              &:active,
              &.is-active {
                background-color: $color-dark;
                border-color: transparent;
                color: bulmaDarken($color-light, 5%);
              } // Sizes
            }
          }
        }
      }
    }
  }

  .du-menu :where(li ul) {
    margin-left: 1rem;
    padding-left: 0.5rem;
  }

  .budget-card {
    .budget-amount {
      &.success {
        color: #b2df8a;
        background: #257953;
      }

      &.danger {
        color: #fb9a99;
        background: #cc0f35;
      }

      &.warn {
        color: #ffe08a;
        background: #946c00;
      }
    }
  }

  .credit-card {
    border: none;
    box-shadow:
      3px 3px 3px 0 rgba(0, 0, 0, 0.7),
      10px 10px 10px 0 rgba(0, 0, 0, 0.5),
      20px 20px 20px 0 rgba(0, 0, 0, 0.4),
      -1px -1px 1px 0 rgba(255, 255, 255, 0.2) !important;
    background: linear-gradient(
      345deg,
      $white 0%,
      $white 60%,
      $white-bis calc(60% + 1px),
      $white-bis 85%,
      $white-ter calc(85% + 1px),
      $white-ter 95%,
      $grey-lightest calc(95% + 1px),
      $grey-lightest 100%
    );
  }
}
