@use "../kit-deps" as *;
@use "typography" as *;

.nav-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  border-bottom: $border-width-base solid $border-color-muted;
  background: rgba($surface-page, 0.96);
  box-shadow: 0 10px 28px rgba($color-black, 0.26);
}

.nav-topbar-toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: $space-2;
  min-width: 150px;
  padding: 0 $space-4;
  border: 0;
  border-right: $border-width-base solid $border-color-muted;
  color: $color-text-light;
  background: $surface-panel;
  font-family: $font-family-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
  cursor: pointer;
  transition-duration: $motion-base;
  transition-timing-function: $motion-ease;
  transition-property: color, background;

  .ph {
    color: $color-secondary;
    font-size: $icon-size-md;
  }

  &:focus-visible {
    @include focus_ring;
  }

  @include hover_touch {
    color: $color-black;
    background: $color-electric-blue;

    .ph {
      color: $color-black;
    }
  }
}

.nav-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: $space-2;
  min-width: 0;
  padding: 0 $space-4;
  color: $color-text-light;
  font-size: $font-size-sm;
  font-weight: $font-weight-bold;
  text-transform: uppercase;

  img {
    width: $icon-size-md;
    height: $icon-size-md;
  }
}

.nav-topbar-current {
  min-width: 160px;
  margin-right: $space-4;
  padding: $space-1 $space-2;
  border: $border-width-base solid $border-color-muted;
  color: $color-text-medium;
  background: $surface-panel-muted;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  text-align: center;
  text-transform: uppercase;
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 910;
  background: $color-black;
  opacity: 0;
  pointer-events: none;
  transition-duration: $motion-slow;
  transition-timing-function: $motion-ease;
  transition-property: opacity;
}

.nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 920;
  display: flex;
  flex-direction: column;
  width: min(380px, 100vw);
  max-height: 100vh;
  border-right: $border-width-base solid $color-text-light;
  background: $surface-panel;
  box-shadow: 18px 0 42px rgba($color-black, 0.38);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-100%);
  transition-duration: $motion-slow;
  transition-timing-function: $motion-ease;
  transition-property: opacity, transform;

  &.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-3;
  padding: $space-3;
  border-bottom: $border-width-base solid $border-color-muted;
}

.nav-drawer-title {
  display: inline-flex;
  padding: $space-2 $space-3;
  color: $color-black;
  background: $color-primary;
  font-size: $font-size-sm;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.nav-drawer-subtitle {
  margin-top: $space-2;
  color: $color-text-dark;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.nav-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $control-height-md;
  height: $control-height-md;
  padding: 0;
  border: $border-width-base solid $border-color-muted;
  color: $color-text-light;
  background: transparent;
  font-size: $icon-size-md;
  cursor: pointer;
  transition-duration: $motion-base;
  transition-timing-function: $motion-ease;
  transition-property: color, background, border-color;

  &:focus-visible {
    @include focus_ring;
  }

  @include hover_touch {
    color: $color-black;
    background: $color-error;
    border-color: $color-error;
  }
}

.nav-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: $space-3;
  scrollbar-width: thin;
  scrollbar-color: $color-secondary $surface-panel;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: $surface-panel;
  }

  &::-webkit-scrollbar-thumb {
    background: $color-secondary;
  }

  .list.list-nav {
    max-width: none;
  }
}

.nav-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $space-3;
  padding: $space-3;
  border-top: $border-width-base solid $border-color-muted;
  color: $color-text-dark;
  background: $surface-panel-muted;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.nav-drawer-open {
  overflow: hidden;

  .nav-drawer-backdrop {
    opacity: 0.82;
    pointer-events: auto;
  }
}

@include media_down("md") {
  .nav-topbar-toggle {
    min-width: 54px;
    padding: 0 $space-3;
  }

  .nav-topbar-brand {
    padding-right: $space-3;
    padding-left: $space-3;
  }

  .nav-topbar-current {
    max-width: 38vw;
    min-width: 0;
    margin-right: $space-3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-drawer {
    width: 100vw;
    border-right: 0;
  }
}

.nav-shell-preview {
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  border: $border-width-base solid $border-color-muted;
  border-left-width: $border-width-accent;
  background: $surface-page;
}

.nav-shell-preview-topbar {
  position: relative;
  z-index: 0;
  min-height: 52px;
  box-shadow: none;
}

.nav-shell-preview-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 320px;
}

.nav-shell-preview-drawer {
  position: relative;
  z-index: 0;
  inset: auto;
  width: auto;
  max-height: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  box-shadow: none;
}

.nav-shell-preview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: $space-3;
  min-width: 0;
  padding: $space-5;
  border-left: $border-width-base solid $border-color-muted;
  background: $surface-panel-muted;

  h3 {
    margin: 0;
    color: $color-text-light;
    font-size: $font-size-xl;
    text-transform: uppercase;
  }

  p {
    max-width: 360px;
    margin: 0;
    color: $color-text-medium;
    font-size: $font-size-sm;
    line-height: $line-height-relaxed;
  }
}

@include media_down("md") {
  .nav-shell-preview-body {
    grid-template-columns: 1fr;
  }

  .nav-shell-preview-content {
    min-height: 180px;
    border-top: $border-width-base solid $border-color-muted;
    border-left: 0;
  }
}