@use "@pythnetwork/component-library/theme";

$header-height: var(--header-height);

:export {
  // stylelint-disable-next-line property-no-unknown
  headerHeight: $header-height;
}

.root {
  scroll-padding-top: $header-height;

  --header-height: #{theme.spacing(18)};

  @include theme.breakpoint("md") {
    --header-height: #{theme.spacing(20)};
  }

  .tabRoot {
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;

    .main {
      isolation: isolate;
      padding-top: theme.spacing(4);
      min-height: calc(100svh - $header-height);

      @include theme.breakpoint("sm") {
        min-height: unset;
        padding-top: theme.spacing(6);
      }
    }

    .header {
      z-index: 1;
      height: $header-height;
    }
  }

  .mobileNavTabs {
    @include theme.breakpoint("sm") {
      display: none;
    }
  }
}
