@use "sass:map";

// Helpers
// -------------------------------------

// Assuming 1rem = 16px, we use a 4px spacing system.
$space-10: 0.1rem;
$space-25: 0.25rem;
$space-50: 0.5rem;
$space-75: 0.75rem;
$space-100: 1rem;
$space-125: 1.25rem;
$space-150: 1.5rem;
$space-175: 1.75rem;
$space-200: 2rem;
$space-250: 2.5rem;
$space-275: 2.75rem;
$space-300: 3rem;
$space-350: 3.5rem;
$space-400: 4rem;
$space-600: 6rem;
$space-800: 8rem;
$space-1200: 12rem;
$space-1600: 16rem;
$space-2400: 24rem;
$space-3200: 32rem;
$space-4000: 40rem;
$space-4800: 48rem;

$space: (
  10: $space-10,
  25: $space-25,
  50: $space-50,
  75: $space-75,
  100: $space-100,
  125: $space-125,
  150: $space-150,
  175: $space-175,
  200: $space-200,
  250: $space-250,
  275: $space-275,
  300: $space-300,
  350: $space-350,
  400: $space-400,
  600: $space-600,
  800: $space-800,
  1200: $space-1200,
  1600: $space-1600,
  2400: $space-2400,
  3200: $space-3200,
  4000: $space-4000,
  4800: $space-4800,
);

@function space($size) {
  @return map.get($space, $size);
}

// Temporary vars for dev

$sidebar-nav-h-padding: 15px;
$sidebar-nav-item-h-padding: 1.5rem;
$sidebar-nav-item-v-padding: 1rem;
$sidebar-nav-item-v-margin: 5px;

// Named spacing vars
// -------------------------------------
// Note that the px units throughout here are intentional – calc() chokes
// when adding "0", which is dumb.

@mixin baseSpacing {
  body {
    --scrollbar-width: 0px;

    --hq-nav-h-padding: #{$sidebar-nav-item-h-padding};

    // Heights of things

    --hq-handheld-header-height: 65px;
    --app-handheld-tab-bar-height: 85px;

    &.hasFixedHeader {
      --effective--fixed-header-height: var(--fixed-header-height);
    }

    --fixed-header-tall-height: 70px;
    &.hasTallFixedHeader {
      --effective-fixed-header-tall-height: var(--fixed-header-tall-height);
    }

    // These are implicitly desktop-only, since there is only a sidebar nav on
    // desktop. But we want access all the time for rare cases like the handheld
    // slide-out nav on handhelds:

    &:not(.hasHqLayout) {
      --sidebar-nav-width: 245px;
    }
    &.hasHqLayout {
      --sidebar-nav-width: 245px;
    }

    // Where the magic happens: this allows adding extra space to the top and bottom
    // of the app for native contexts where we want to use the full screen, but avoid
    // system safe areas (notches, etc). These are normally set with js, uncomment for dev:

    // --app-inset-top: 70px;
    // --app-inset-bottom: 70px;

    // This is a little dumb: for fixed position things that are inside of any always-there
    // fixed position elements. So far only the HQ mobile header.

    --content-fixed-top: calc(var(--effective-hq-handheld-header-height, 0px));
    --content-fixed-right: 0px;
    --content-fixed-bottom: calc(
      var(--effective--app-tab-bar-height, 0px) + var(--app-inset-bottom, 0px)
    );
    --content-fixed-left: calc(var(--effective-sidebar-nav-width, 0px));

    // Content insets are the area inside of fixed elements that the main page
    // content needs to clear. Applied as padding on `body`, respects app insets.

    --content-inset-top: calc(
      var(--app-inset-top, 0px) + var(--effective--fixed-header-height, 0px) +
        var(--effective-fixed-header-tall-height, 0px) +
        var(--effective-hq-handheld-header-height, 0px)
    );

    --content-inset-bottom: calc(
      var(--app-inset-bottom, 0px) + var(--effective--app-tab-bar-height, 0px) +
        var(--effective--fixed-bottom-button-height, 0px)
    );
  }
}

@mixin baseHandheldSpacing {
  body {
    --app-h-padding: #{$space-125};
    --card-h-padding: 1.35rem;

    --base-max-width: none;
    --wrap-narrow-max-width: none;

    &.hasAppTabBar {
      --effective--app-tab-bar-height: var(--app-handheld-tab-bar-height);
    }

    &.hideMobileAppTabBar {
      --effective--app-tab-bar-height: 0px;
    }

    &.hasFixedBottomButton {
      --effective--fixed-bottom-button-height: 100px;
    }

    &.hasHqLayout {
      --effective-hq-handheld-header-height: var(--hq-handheld-header-height);
    }

    --fixed-header-height: 48px;
  }
}

@mixin baseDesktopSpacing {
  body {
    --container-max-width: 1258px;

    --app-h-padding: 3.5rem;
    --card-h-padding: #{$space-150};

    --base-max-width: 900px;
    --wrap-narrow-max-width: 30rem;

    --fixed-header-height: 60px;

    &.hasAppLayout,
    &.hasHqLayout {
      --effective-sidebar-nav-width: var(--sidebar-nav-width, 0px);
    }
  }
}

$scrollbar-width: var(--scrollbar-width);

$card-h-padding: var(--card-h-padding);
$app-h-padding: var(--app-h-padding);
$base-max-width: var(--base-max-width);
$wrap-narrow-max-width: var(--wrap-narrow-max-width);

$fixed-header-height: var(--fixed-header-height);
$fixed-header-tall-height: var(--fixed-header-tall-height);
$hq-handheld-header-height: var(--hq-handheld-header-height);
$app-handheld-tab-bar-height: var(--app-handheld-tab-bar-height);

$app-inset-top: var(--app-inset-top, 0px);
$app-inset-bottom: var(--app-inset-bottom, 0px);

$content-fixed-top: var(--content-fixed-top);
$content-fixed-right: var(--content-fixed-right);
$content-fixed-bottom: var(--content-fixed-bottom);
$content-fixed-left: var(--content-fixed-left);

$content-inset-top: var(--content-inset-top);
$content-inset-bottom: var(--content-inset-bottom);

$hq-nav-h-padding: var(--hq-nav-h-padding);
$sidebar-nav-width: var(--sidebar-nav-width);

$container-max-width: var(--container-max-width, none);

$content-max-width: calc(var(--container-max-width, none) - var(--sidebar-nav-width));

@mixin fillContentWidth {
  @include m.desktop {
    // For when the screen is wider than the container
    max-width: $content-max-width;

    // As the screen gets smaller
    width: calc(100vw - $sidebar-nav-width - $scrollbar-width);

    margin-left: calc(-1 * $app-h-padding);
  }

  @include m.handheld {
    margin-left: calc(-1 * design.$app-h-padding);
    margin-right: calc(-1 * design.$app-h-padding);
  }
}

// Stacking
// -------------------------------------

$z-floating-card: 7;
$z-debug-button: 8;
$z-fixed-header: 9;
$z-sidebar-nav: 10;
$z-handheld-header: 11;
$z-handheld-nav-showing: 13;

$z-confetti: 100;