@use "../util" as *;
@use "../globals" as *;

$appbar-width-open: 300px;

.appbar {
  position: sticky;
  margin-inline: -0.75rem;
  top: 0;
  padding: 1.25rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: $text-core;
  //background-color: #dbe2f8;
  z-index: $appbar-zindex;
  transition: all 0.3s ease;
  // background: radial-gradient(rgba(255,255,255,.05), rgba(255,255,255,.025));
  //backdrop-filter: blur(15px);
  // margin-inline: -1.75rem;
  background: linear-gradient(
    to left,
    var(--bg-core-primary),
    var(--bg-core-end)
  );
  background-attachment: fixed;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.65);
    pointer-events: none;
    z-index: -1;
  }

  @include breakpoint(sm) {
    margin-inline: -2rem;
    padding: 1.25rem 1.75rem;
    &::after {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
}
