@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 {
      flex: none;
      gap: theme.spacing(6);

      @include theme.row;

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

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

          .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");
      }
    }

    .rightMenu {
      flex: none;
      gap: theme.spacing(2);

      @include theme.row;

      margin-right: -#{theme.button-padding("sm", false)};

      .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);
        }
      }
    }
  }
}