// This class is added to the sites that aren't using the Amplify UI theme provider and is creating the variables that are being used in dark mode of Amplify UI
.use-ui-theme {
  --amplify-colors-font-primary: #232f3e;
  --amplify-colors-font-tertiary: #545b64;
  --amplify-colors-background-primary: white;
  --amplify-colors-font-hover: #000;
}

.navbar {
  background-color: var(--amplify-colors-neutral-90);
  position: sticky;
  top: 0px;
  z-index: 200;

  a,
  p,
  span {
    font-family: 'Amazon Ember';
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
  }

  // Top level navbar element, create all of the variables that will be used throughout the unified navbar
  --navbar-border-color: var(--amplify-colors-neutral-80);
  --navbar-padding-inline: var(--amplify-space-large);
  --navbar-current-property-color: #ff9900;
  --secondary-nav-hover-color: black;
  --secondary-nav-hover-background-color: var(--amplify-colors-neutral-90);
  --dev-center-nav-height: 3rem;
  --amplify-colors-font-hover: var(--amplify-colors-neutral-10);
  --navbar-mobile-nav-padding: 12px;
  --nav-links-spacing: 20px;
}

[data-amplify-theme='amplify-docs'][data-amplify-color-mode='dark'] .navbar {
  --amplify-colors-font-hover: inherit;
}

[data-amplify-theme='amplify-docs'][data-amplify-color-mode='system'] .navbar {
  @media (prefers-color-scheme: dark) {
    --amplify-colors-font-hover: inherit;
  }
}

.dev-center-logo {
  color: var(--amplify-colors-neutral-10);
  font-size: var(--amplify-font-sizes-large);
  white-space: nowrap;
}

.nav-links-container {
  z-index: 200;
  width: 100%;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: space-between;
  align-items: stretch;
  height: auto;
  flex-direction: column;
  padding: 0;
  background-color: var(--amplify-colors-neutral-90);
  gap: initial;
  & .left-nav-links,
  .right-nav-links {
    flex-direction: column;
    gap: initial;
  }
}

.nav-expander {
  &:hover,
  :active {
    border: none;
    box-shadow: none;
  }

  &:focus {
    box-shadow: 0 0 0 2px var(--amplify-colors-neutral-10);
  }
}

.nav-menu-item {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: var(--amplify-font-sizes-medium);
  text-decoration: none;
  color: var(--amplify-colors-neutral-40) !important;
  font-family: 'Amazon Ember';
  font-weight: 400;

  white-space: nowrap;

  &:hover {
    color: var(--amplify-colors-neutral-10) !important;

    .custom-path-stroke {
      stroke: var(--amplify-colors-neutral-10);
    }
  }

  &:focus {
    box-shadow: 0 0 0 2px var(--amplify-colors-neutral-10);
  }

  .custom-path-stroke {
    stroke: var(--amplify-colors-neutral-40);
  }
}

.chevron-icon {
  fill: var(--amplify-colors-neutral-40);
}

.background-overlay {
  background-color: var(--amplify-colors-overlay-40);
  z-index: 150;
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
}

.icon-link {
  margin-left: auto;
  margin-right: auto;
}

.mobile-border {
  padding: var(--navbar-mobile-nav-padding) var(--navbar-padding-inline);
  border-top: 1px solid var(--navbar-border-color);
}

.logo-container {
  padding-inline: var(--navbar-padding-inline);
  height: var(--dev-center-nav-height);
}

.collapsed-menu {
  display: none;
}

.social-links {
  justify-content: space-around;
  column-gap: var(--nav-links-spacing);
  padding: 0px;

  // Make the social links cover their whole flex area
  div {
    height: 100%;
    width: 100%;
    border-right: 1px solid var(--navbar-border-color);
    padding: var(--navbar-mobile-nav-padding) 0px;

    &:last-child {
      border: none;
    }
  }
}

.desktop-only {
  display: none;
}

@media (min-width: 975px) {
  .current-nav-menu-item {
    border-bottom: 2px solid var(--navbar-current-property-color);
    color: var(--amplify-colors-neutral-10) !important;
    height: var(--dev-center-nav-height);
    line-height: var(--dev-center-nav-height);
  }

  .social-links {
    justify-content: normal;

    div {
      border: none;
    }
  }

  .background-overlay {
    height: auto;
    width: auto;
    position: relative;
  }

  .collapsed-menu {
    display: flex;
  }

  .desktop-only {
    display: flex;
  }

  .mobile-only {
    display: none;
  }

  .mobile-border {
    padding: 0;
    border: none;
  }

  .nav-links-container {
    position: inherit;
    flex-direction: row;
    height: var(--dev-center-nav-height);
    gap: var(--nav-links-spacing);
    & .left-nav-links,
    .right-nav-links {
      flex-direction: row;
      align-items: center;
      gap: var(--nav-links-spacing);
    }
  }

  .icon-link {
    margin-inline: auto;
  }

  .logo-container {
    padding-inline: 0;
  }

  .navbar {
    padding-inline: var(--navbar-padding-inline);
  }
}