.wrapper {
  margin-bottom: 0.625rem;
  position: sticky;
  top: 0.625rem;
  z-index: 20;

  &::before {
    content: "";
    background-color: var(--color-white);
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    border-radius: 1.25rem;
  }

  @include bp-max("tablet") {
    &::before {
      height: calc(100% + (0.625rem * var(--scroll-progress)));
      width: calc(100% + (1rem * var(--scroll-progress)));
      left: calc(var(--scroll-progress) * -0.5rem);
      border-radius: calc(1.25rem - (var(--scroll-progress) * 1.25rem));
      box-shadow: 0 calc(0.375rem * var(--scroll-progress)) calc(1rem * var(--scroll-progress))
        rgba(0, 0, 0, calc(0.1 * var(--scroll-progress)));
    }
  }

  @include bp("tablet") {
    top: 1.5rem;
    margin-bottom: 1.5rem;

    &::before {
      background-color: var(--color-smoke);
      height: 3.5rem;
      top: -1.5rem;
      bottom: unset;
      left: 0;
      width: 100%;
      border-radius: 0;
    }
  }
}

.header {
  position: relative;
  z-index: 3;
  margin-inline: auto;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--color-white);
  gap: 1.5rem;

  @include bp("tablet") {
    padding: 1rem 1.875rem;
  }
}

.mobile-home {
  display: flex;
  svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-navy);
  }

  @include bp("tablet") {
    display: none;
  }
}

.header-right {
  display: flex;
  gap: 1.125rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.125rem;

  .mobile-connect {
    height: 2.375rem;
    display: flex;
    align-items: center;

    @include bp("tablet") {
      display: none;
    }
  }
}
