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

.container {
  background-color: var(--Navigation-bg, transparent);

  &.withAd {
    padding-top: int.$spacing-8;
  }
}

.navigation {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-areas: "left center right";
  align-items: center;
  padding: int.$spacing-6 int.$spacing-6;
  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);
}

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

  @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.$politico-red);
  text-decoration: none;
  font-size: 1.62rem;
  text-align: center;
  grid-area: center;
}