@use "design";
@use "m";

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

    // As the screen gets smaller
    width: calc(
      100vw - design.$sidebar-nav-width - design.$scrollbar-width - design.$app-h-padding
    );

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

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

$spacing: (0, 10, 25, 50, 75, 100, 125, 150, 175, 200, 275, 300);

// Spacer.

.spacer {
  display: block;

  // Make sure <Spacer> doesn't get extra space around it in <Vertical> or <Horizontal>.
  &,
  & + * {
    --vertical-spacing: 0 !important;
    --horizontal-spacing: 0 !important;
  }
}

@mixin spacerSize($size) {
  &.spacerVertical {
    height: #{design.space($size)};
  }
  &.spacerHorizontal {
    width: #{design.space($size)};
  }
}

@each $size in $spacing {
  .spacer#{$size} {
    @include spacerSize($size);
  }
  @include m.handheld {
    .spacerHandheld#{$size} {
      @include spacerSize($size);
    }
  }
  @include m.desktop {
    .spacerDesktop#{$size} {
      @include spacerSize($size);
    }
  }
}

// Vertical & Horizontal.

.hideWhenEmpty:empty {
  display: none;
}

.vertical {
  > :not(.passthrough:empty) + *,
  > .passthrough > * + * {
    margin-top: var(--vertical-spacing);
  }
}

@each $size in $spacing {
  .vSpace#{$size} > * {
    --vertical-spacing: #{design.space($size)};
  }
  @include m.handheld {
    .vSpaceHandheld#{$size} > * {
      --vertical-spacing: #{design.space($size)};
    }
  }
  @include m.desktop {
    .vSpaceDesktop#{$size} > * {
      --vertical-spacing: #{design.space($size)};
    }
  }

  // Before.
  .vSpaceBefore#{$size} {
    --vertical-spacing: #{design.space($size)} !important;
  }
  @include m.handheld {
    .vSpaceBeforeHandheld#{$size} {
      --vertical-spacing: #{design.space($size)} !important;
    }
  }
  @include m.desktop {
    .vSpaceBeforeDesktop#{$size} {
      --vertical-spacing: #{design.space($size)} !important;
    }
  }

  // After.
  .vSpaceAfter#{$size} + * {
    --vertical-spacing: #{design.space($size)} !important;
  }
  @include m.handheld {
    .vSpaceAfterHandheld#{$size} + * {
      --vertical-spacing: #{design.space($size)} !important;
    }
  }
  @include m.desktop {
    .vSpaceAfterDesktop#{$size} + * {
      --vertical-spacing: #{design.space($size)} !important;
    }
  }
}

.horizontal {
  display: flex;

  > * + * {
    margin-left: var(--horizontal-spacing);
  }
}

@each $size in $spacing {
  .hSpace#{$size} > * {
    --horizontal-spacing: #{design.space($size)};
  }
  @include m.handheld {
    .hSpaceHandheld#{$size} > * {
      --horizontal-spacing: #{design.space($size)};
    }
  }
  @include m.desktop {
    .hSpaceHandheld#{$size} > * {
      --horizontal-spacing: #{design.space($size)};
    }
  }

  .hSpaceBefore#{$size} {
    --horizontal-spacing: #{design.space($size)} !important;
  }
  @include m.handheld {
    .hSpaceBeforeHandheld#{$size} {
      --horizontal-spacing: #{design.space($size)} !important;
    }
  }
  @include m.desktop {
    .hSpaceBeforeDesktop#{$size} {
      --horizontal-spacing: #{design.space($size)} !important;
    }
  }

  // After.
  .hSpaceAfter#{$size} + * {
    --horizontal-spacing: #{design.space($size)} !important;
  }
  @include m.handheld {
    .hSpaceAfterHandheld#{$size} + * {
      --horizontal-spacing: #{design.space($size)} !important;
    }
  }
  @include m.desktop {
    .hSpaceAfterDesktop#{$size} + * {
      --horizontal-spacing: #{design.space($size)} !important;
    }
  }
}
@each $align in (center, start, end, stretch) {
  .align#{$align} {
    align-items: $align;
  }
}

@each $justify in (center, start, end, stretch, space-around, space-between, space-evenly) {
  .justify#{$justify} {
    justify-content: $justify;
  }
}

@mixin twoColumnSetup {
  display: grid;
  gap: design.$space-175;

  &.leftCol40 {
    grid-template-columns: 1fr 1.5fr;
  }

  &.leftCol50 {
    grid-template-columns: 1fr 1fr;
  }

  &.leftCol60 {
    grid-template-columns: 1.5fr 1fr;
  }
}

.twoColumnView {
  &:not(.respond) {
    @include twoColumnSetup;
  }

  &.respond {
    @include m.desktop {
      @include twoColumnSetup;
    }

    @include m.handheld {
      &:not(.reverseHandhelds) {
        > * + * {
          padding-top: 2rem;
        }
      }

      &.reverseHandhelds {
        display: flex;
        flex-direction: column-reverse;

        // This is a little bit of a lazy hack for the align classes getting applied
        // here when we really only want them on desktop
        align-items: stretch;

        > * + * {
          padding-bottom: 2rem;
        }
      }
    }
  }
}

// WIP: "Centered form" which is no longer centered
// -------------------------------------

@include m.handheld {
  .centeredPage {
    box-sizing: content-box;
    padding: 0 design.$app-h-padding;
    max-width: design.$base-max-width;
  }
}

@include m.desktop {
  .centeredPage {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;

    overflow: auto;
  }

  .centeredPageContainer {
    position: relative;

    width: design.$wrap-narrow-max-width;
    margin: 0 auto;
    max-height: 100%;
  }
}

// This is necessary because padding on the max-height element above won't be applied
.centeredPageContent {
  padding-bottom: calc(30px + design.$app-inset-bottom);

  @include m.desktop {
    padding-top: calc(20px + design.$content-inset-top);
    padding-right: 10px;
    padding-left: 10px;
  }

  @include m.handheld {
    padding-top: calc(30px + design.$content-inset-top);
  }
}

// Horizontal scrolling
// -------------------------------------

// For now, this assumes that the blocks should be the
// width of the app. Bit of a bummer, but this can't go
// inside of BankPageContent

.hScroll {
  padding-left: design.$app-h-padding;
  padding-right: design.$app-h-padding;

  padding-top: 10px;
  padding-bottom: 10px;

  overflow-x: auto;

  display: grid;
  grid-gap: 1rem;
  grid-auto-flow: column;

  @include m.handheld {
    grid-auto-columns: calc(100% - 3rem);
  }
  @include m.desktop {
    grid-auto-columns: calc(design.$wrap-narrow-max-width - 2rem);
  }
}

// Horizontal width wrappers
// -------------------------------------

.page,
.wrap.resetWidth {
  box-sizing: content-box; // Make it so we can actually use the app max width reliably
  padding: 0 design.$app-h-padding;
  max-width: design.$base-max-width;
}

.page {
  position: relative;
  padding-top: design.$content-inset-top;
  padding-bottom: 2.3rem;
}

.wrap {
  &.appHSpace {
    padding-left: design.$app-h-padding;
    padding-right: design.$app-h-padding;
  }

  &.narrowWidth {
    @include m.desktop {
      max-width: design.$wrap-narrow-max-width;
    }
  }

  &.wideWidth {
    @include m.desktop {
      width: calc(
        (100vw - design.$scrollbar-width - design.$sidebar-nav-width - (design.$app-h-padding * 2))
      );
    }
  }

  &.fillWidth {
    @include fillContentWidth;
  }
}

// Fixed position header
// -------------------------------------

.fixedHeader {
  box-sizing: content-box;
  padding-top: design.$app-inset-top;

  position: fixed;
  top: design.$content-fixed-top;
  height: design.$fixed-header-height;

  @include m.desktop {
    @include fillContentWidth;
  }

  @include m.handheld {
    left: 0;
    right: 0;
  }

  &.isTall {
    height: design.$fixed-header-tall-height;
  }
  z-index: design.$z-fixed-header;

  // overflow: hidden; // For debugging

  display: flex;
  align-items: stretch;

  & > *:first-child {
    flex-grow: 1;
  }
}

// Icon before some content
// -------------------------------------

.leadingIcon {
  display: flex;
  align-items: center;

  > :first-child {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    width: calc(24px + design.$card-h-padding);

    color: design.$color-brand-primary;
    font-weight: design.$weight-display-bold;
    font-size: 19px;
  }

  svg {
    width: 24px;
    height: 24px;
  }
}

// Layout columns
// -------------------------------------

@include m.desktop {
  .layoutColumns {
    max-width: design.$container-max-width;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: design.$sidebar-nav-width 1fr;

    // border-right: 1px solid #ddd;

    > :first-child {
      // border-right: 1px solid #ddd;
      // background: red;
      max-height: 100vh;
      overflow: auto;
      position: sticky;
      top: 0;

      box-sizing: border-box;
    }
  }
}