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

// Desktop-only logo

.logo {
  padding-top: 3rem;
  padding-bottom: 1rem;
  padding-left: calc(design.$sidebar-nav-h-padding + design.$sidebar-nav-item-h-padding);

  @include m.handheld {
    display: none;
  }
}

// Tab bar
// --------------------------------

.navigationWrap {
  box-sizing: content-box;

  z-index: design.$z-sidebar-nav;

  @include m.handheld {
    position: fixed;
    left: 0;
    bottom: 0;

    right: 0;
    height: design.$app-handheld-tab-bar-height;
    padding-left: design.$space-50;
    padding-right: design.$space-50;
    padding-bottom: design.$app-inset-bottom;

    box-shadow: 0 0 9px 0px design.$color-neutral-shadow;

    transition: transform 400ms;

    background-color: design.$color-page-background;
    color: design.$color-on-page-background;

    // Hack-ish: hide if body class is set
    body:global(.hideMobileAppTabBar) & {
      transform: translate3d(0, 110%, 0);
    }
  }

  @include m.desktop {
    top: 0;
    padding-top: design.$app-inset-top;
    width: design.$sidebar-nav-width;

    // box-shadow: 0 0 9px 0px var(--color-neutral-shadow);
    // background-color: design.$color-surface;
    // border-right: 1px solid design.$card-border-color;
  }
}

.navigation {
  @include m.desktop {
    padding: 2rem 15px;
  }

  @include m.handheld {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
    height: design.$app-handheld-tab-bar-height;
  }
}

.navigationItem {
  text-align: center;

  @include m.handheld {
    flex-grow: 1;
  }

  @include m.desktop {
    margin-bottom: design.$sidebar-nav-item-v-margin;
  }

  a {
    display: flex;
    position: relative;

    @include m.handheld {
      height: 100%;

      flex-direction: column;
      align-items: stretch;

      padding-top: 12px;
      padding-left: design.$space-50;
      padding-right: design.$space-50;
      padding-bottom: design.$space-50;
    }

    @include m.desktop {
      align-items: center;
      @include m.shadeActive;
      border-radius: 1000px;

      font-family: design.$font-brand;

      padding: design.$sidebar-nav-item-v-padding design.$sidebar-nav-item-h-padding;
    }

    @include m.noSelect;
    @include m.noCallout;
  }

  &:not(.active) .icon {
    color: design.$color-on-surface-variant;
  }

  &.active .icon {
    color: design.$color-primary;
  }

  @include m.desktop {
    &.active a {
      background: design.$color-primary-container;
      color: design.$purple-20;
    }
  }

  @include m.handheld {
    &.active a {
      color: design.$color-primary;
    }
  }
}

.icon {
  line-height: 0; // Hello darkness, my old friend
  flex-shrink: 0;

  svg {
    display: inline-block;
    height: 25px;

    @include m.desktop {
      width: 28px;
    }
  }
}

// This is a little lazy, can be made to look nicer later
.badge {
  @include m.handheld {
    position: absolute;
    top: 6px;
    right: 32%;
  }

  @include m.desktop {
    margin-left: auto;
    padding-left: 8px;
  }
}

.label {
  @include m.handheld {
    margin-top: 8px;
    @include design.font-smallest;
  }

  @include m.desktop {
    margin-left: 12px;
    font-size: 18px;
  }
}

// Layout hacks that kind of just work
// --------------------------------

.bankPageHeading {
  @include m.handheld {
    padding-top: 1.8rem;
  }
  @include m.desktop {
    padding-top: 2.3rem;
  }
}

// Little less spacing when there's a back button before

.bankPageTitle + .bankPageHeading,
.bankPageTitle + * > .bankPageHeading:first-child {
  @include m.handheld {
    padding-top: 1.3rem;
  }
  @include m.desktop {
    padding-top: 1.4rem;
  }
}

// "BankPageTitle" is kind of like the iOS nav bar
// --------------------------------

.bankPageTitle {
  justify-content: space-between;

  background: linear-gradient(
    0deg,
    rgba(design.$color-page-background--rgb, 0.3) 50%,
    design.$color-page-background 100%
  );

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  @include m.print {
    display: none !important;
  }
}

.backLink,
.fixedHeaderCancel {
  display: flex;
  align-items: center;
  height: 100%;

  flex-grow: 0 !important; // Thanks, .fixedWidthHeader, but we really don't need to grow

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

  cursor: pointer;

  &:focus-visible {
    @include m.focusRingInside;
  }

  @include m.active {
    opacity: 0.6;
  }
}

.backLink {
  span {
    line-height: 1;
  }

  svg {
    margin-right: 7px;
    flex-shrink: 0;
  }
}

.fixedHeaderCancel {
  flex-shrink: 0;
  margin-left: auto;

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

// Headings are more just big text and a description
// --------------------------------

.bankPageHeading {
  margin-bottom: 20px;

  .body {
    margin-top: 20px;
  }

  h1 {
    color: design.$color-on-surface;
  }
}

.titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.appShadedHeader {
  background: rgb(51, 33, 106);
  background: linear-gradient(
    129deg,
    rgba(51, 33, 106, 1) 0%,
    rgba(52, 22, 144, 1) 28%,
    rgba(94, 59, 201, 1) 100%
  );

  color: design.$color-on-primary;
  padding-bottom: 50px;
  margin-bottom: -40px;
}

// Creates an invisible shim that blurs the region contained by $app-inset-tpp, when
// there is one. Use if no `BankPageTitle`.  Only necessary in the app, not HQ.
// --------------------------------

.appStatusShim {
  height: design.$app-inset-top;
  z-index: design.$z-handheld-nav-showing;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  background: linear-gradient(
    0deg,
    rgba(design.$color-page-background--rgb, 0.3) 0%,
    design.$color-page-background 100%
  );

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

// Buttons pinned to the bottom of the view, mobile only for now
// --------------------------------

@include m.handheld {
  .fixedBottomButton {
    background: linear-gradient(
      180deg,
      rgba(design.$color-page-background--rgb, 0.3) 50%,
      design.$color-page-background 100%
    );
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    position: fixed;
    z-index: design.$z-fixed-header;
    left: design.$content-fixed-left;
    right: design.$content-fixed-right;
    bottom: design.$content-fixed-bottom;
    padding: 15px design.$app-h-padding;

    // Instead of trying to apply conditionally padding to this element and make everything
    // line up when there is an --app-inset-bottom, just put a semi-transparent shim under.

    &::after {
      content: "";
      background-color: design.$color-page-background;

      position: absolute;
      bottom: calc(-1 * design.$app-inset-bottom);
      height: design.$app-inset-bottom;
      left: design.$content-fixed-left;
      right: design.$content-fixed-right;
    }
  }
}