/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-primary-navigation .container-fluid, sharpen-primary-navigation .navbar, sharpen-primary-navigation .brand {
  display: flex;
  align-items: center;
}
sharpen-primary-navigation .navbar {
  height: 4.5rem;
  background-color: var(--color-evergreen);
  color: var(--color-ivory);
  display: flex;
  flex: 1;
  gap: var(--spacing-md);
  justify-content: space-between;
}
sharpen-primary-navigation .navbar > nav {
  display: none;
  flex: 1;
  gap: var(--spacing-lg);
}
sharpen-primary-navigation .navbar > nav a {
  color: var(--color-ivory);
  text-decoration: none;
  padding-bottom: 5px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
sharpen-primary-navigation .navbar > nav [selected] a {
  padding-bottom: 3px;
  border-bottom: var(--border-thin-solid-sunrise);
}
sharpen-primary-navigation > nav {
  display: none;
  background-color: var(--color-pine);
}
sharpen-primary-navigation > nav > sharpen-nav-link a {
  display: block;
  padding: var(--spacing-md);
  text-align: center;
  color: var(--color-ivory);
  text-decoration: none;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  border-bottom: 1px dotted var(--color-putty);
}
sharpen-primary-navigation > nav > sharpen-nav-link[selected] a {
  font-weight: 600;
  color: var(--color-sunrise);
}
sharpen-primary-navigation.menu-open > nav {
  display: block;
}
sharpen-primary-navigation .brand img {
  height: 31px;
}
sharpen-primary-navigation #spn-current-learner {
  flex: 1;
  cursor: pointer;
  color: var(--color-evergreen);
  background-color: var(--color-mint);
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
  overflow-y: hidden;
  text-overflow: ellipsis;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill:%232C5652;" height="16" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
  background-position: top 8px right 7px;
  background-repeat: no-repeat;
}
sharpen-primary-navigation #spn-current-user {
  cursor: pointer;
  justify-content: right;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-lg);
  padding-right: var(--spacing-lg);
  white-space: nowrap;
  overflow-y: hidden;
  text-overflow: ellipsis;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill:white;" height="16" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
  background-position: top 4px right 4px;
  background-repeat: no-repeat;
}

@media (min-width: 992px) {
  sharpen-primary-navigation .navbar {
    gap: var(--spacing-lg);
  }
  sharpen-primary-navigation .navbar > nav {
    display: flex;
  }
  sharpen-primary-navigation #spn-current-learner {
    flex: initial;
  }
  sharpen-primary-navigation #spn-app-menu-button {
    display: none;
  }
}