@use "../../../styles/int.scss";

.navigation {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  padding: int.$spacing-6 int.$spacing-8;
  background-color: var(--Navigation-bg, transparent);
  color: var(--Navigation-fg, inherit);
  border-color: var(--Navigation-border-color, rgba(180, 180, 180, .35));
  border-top: none;
  border-left: none;
  border-right: none;
}

.defaultBorder {
  border-bottom: 1px solid rgba(180, 180, 180, .35);
}

.home {
  justify-self: flex-start;
}

.menu {
  justify-self: flex-end;
  display: none;
  gap: 1.5rem;

  @include int.overline($size: "000");

  @include int.breakpoint-at-least("md") {
    display: flex;
  }
}

.link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.brand {
  color: var(--Navigation-logo-color, int.$red-60);
  text-decoration: none;
  font-size: 1.62rem;

  @include int.breakpoint-at-least("sm") {
    font-size: 2.8rem;
  }

  @include int.breakpoint-at-least("md") {
    font-size: 3.1rem;
  }
}
