@use './mixins' as *;

// import components

@use './nav/menu';

.navbar-wrapper {
  @include with-bg;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  height: var(--header-height);
  padding: 0 12px 0 24px;
  backdrop-filter: saturate(50%) blur(8px);
  background: var(--bg-color-filter);
  -webkit-backdrop-filter: saturate(50%) blur(8px);
  top: 0;

  @include respond-to('md') {
    padding: 0 12px 0 32px;
  }

  @include respond-to('xlg') {
    padding: 0 32px;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .content {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-grow: 1;
    }

    @include respond-to('xxl') {
      max-width: calc(var(--vp-screen-max-width));
    }

    @include respond-to('max') {
      // 36 = 2 * 18 for each side.
      max-width: calc(var(--vp-screen-max-width));
    }
  }

  @include respond-to('md') {
    .content {
      padding-top: 1px;
    }
  }
}

.navbar {
  top: 0;
  left: 0;
  position: relative;
  z-index: var(--nav-z-index);

  @include respond-to('lg') {
    position: fixed;
    width: 100%;
  }
}

.menu + .appearance {
  margin-left: 8px;
}

.menu + .social-links {
  margin-left: 12px;
}

.appearance + .social-links {
  margin-left: 12px;
}