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

.header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: theme.color("background", "nav-blur");
  backdrop-filter: blur(32px);

  .content {
    height: 100%;
    justify-content: space-between;

    @include theme.row;
    @include theme.max-width;

    .leftMenu {
      @include theme.row;

      flex: none;
      gap: theme.spacing(3);

      @include theme.breakpoint("sm") {
        gap: theme.spacing(6);
      }

      .logoLink {
        padding: theme.spacing(3);
        margin: -#{theme.spacing(3)};
        color: theme.color("foreground");

        .logoWrapper {
          width: theme.spacing(8);
          height: theme.spacing(8);
          position: relative;

          @include theme.breakpoint("sm") {
            width: theme.spacing(9);
            height: theme.spacing(9);
          }

          .logo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
          }
        }

        .logoLabel {
          @include theme.sr-only;
        }
      }

      .appName {
        font-size: theme.font-size("xl");
        font-weight: theme.font-weight("semibold");
        color: theme.color("heading");
      }

      .mainNavTabs {
        display: none;

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

    .rightMenu {
      @include theme.row;

      flex: none;
      gap: theme.spacing(3);
      margin-right: -#{theme.button-padding("sm", false)};

      @include theme.breakpoint("lg") {
        gap: theme.spacing(2);
      }

      .supportButton,
      .themeSwitch,
      .mainCta {
        display: none;

        @include theme.breakpoint("lg") {
          display: unset;
        }
      }

      .outlineSearchButton {
        display: none;

        @include theme.breakpoint("md") {
          display: unset;
        }
      }

      .ghostSearchButton {
        @include theme.breakpoint("md") {
          display: none;
        }
      }

      .mobileMenu {
        @include theme.breakpoint("lg") {
          display: none;
        }
      }

      .themeSwitch {
        margin-left: theme.spacing(1);
      }
    }

    @media screen and (min-width: theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))) {
      .leftMenu {
        margin-left: -#{theme.spacing(9) + theme.spacing(7)};

        .logoLink {
          margin-right: -#{theme.spacing(2)};
        }
      }

      .rightMenu {
        margin-right: -#{theme.spacing(9) + theme.spacing(7)};

        .themeSwitch {
          margin-left: theme.spacing(5);
        }
      }
    }
  }
}
