// 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 {
  // Top level navbar element, create all of the variables that will be used throughout the unified navbar
  --navbar-background-color: var(--amplify-colors-background-primary);
  --navbar-border-color: var(--amplify-colors-neutral-20);
  --navbar-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  --navbar-padding-inline: var(--amplify-space-medium);
  --navbar-current-property-color: var(--amplify-colors-primary-60);
  --nav-menu-item-border-width: 2px;
  --nav-menu-item-color: var(--amplify-colors-neutral-100);
  --nav-menu-item-active-color: var(--amplify-colors-neutral-100);
  --nav-menu-item-hover-color: var(--amplify-colors-primary-60);
  --nav-menu-item-mobile-padding-block: var(--amplify-space-xs);
  --nav-menu-item-mobile-padding-inline: var(--amplify-space-large);
  --nav-menu-item-padding-inline: var(--amplify-space-xs);
  --secondary-nav-hover-color: black;
  --secondary-nav-hover-background-color: var(--amplify-colors-neutral-90);
  --dev-center-nav-height: 4rem;
  --logo-color: var(--amplify-colors-neutral-100);
  --amplify-colors-font-hover: var(--amplify-colors-neutral-10);
  --navbar-mobile-nav-padding: 12px;
  --nav-links-spacing: var(--amplify-space-small);

  background-color: var(--navbar-background-color);
  position: fixed;
  top: 0px;
  z-index: 200;
  width: 100%;

  border-bottom: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-secondary);

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

[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(--logo-color);
  font-size: var(--amplify-font-sizes-medium);
  white-space: nowrap;
}

.gen2-home {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: var(--amplify-space-xxs);
  padding: var(--amplify-space-small);
  &:focus {
    outline: 2px solid var(--amplify-colors-font-inverse);
  }
}

.nav-links-container {
  z-index: 200;
  width: 100%;
  position: relative;
  top: 0;
  align-items: center;
  justify-content: space-between;
  align-items: stretch;
  height: auto;
  flex-direction: column;
  padding: 0;
  background-color: var(--navbar-background-color);

  gap: initial;
  & .left-nav-links,
  .right-nav-links {
    flex-direction: column;
    gap: initial;
  }
}

.nav-expander {
  align-self: center;
  padding: var(--amplify-space-medium);
}

.mobile-current-link {
  border: 2px solid transparent;
  padding: var(--amplify-space-xxs);
}
.mobile-current-link:focus {
  border-color: var(--amplify-colors-neutral-90);
}

.nav-menu-item {
  display: flex;
  border: var(--nav-menu-item-border-width) solid transparent;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: var(--nav-menu-item-mobile-padding-block)
    var(--nav-menu-item-mobile-padding-inline);
  font-size: var(--amplify-font-sizes-medium);
  text-decoration: none;
  color: var(--nav-menu-item-color);
  font-family: 'Amazon Ember';
  font-weight: 700;
  white-space: nowrap;

  &:visited {
    color: var(--nav-menu-item-active-color);
  }

  &:hover {
    color: var(--nav-menu-item-hover-color);
  }

  &:focus {
    outline: none;
    border: 2px solid var(--amplify-colors-neutral-90);
  }

  .custom-path-stroke {
    stroke: currentColor;
  }
}

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

.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 {
  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: 500px) {
  .dev-center-logo {
    font-size: var(--amplify-font-sizes-large);
  }
}

@media (min-width: 975px) {
  .nav-menu-item {
    padding-inline: var(--nav-menu-item-padding-inline);
    height: var(--dev-center-nav-height);
    line-height: var(--dev-center-nav-height);
  }
  .right-nav-links .nav-menu-item {
    padding-inline: 10px;
  }
  .current-nav-menu-item {
    color: var(--amplify-colors-primary-80);

    position: relative;
  }
  .current-nav-menu-item:after {
    height: 4px;
    border-radius: 2px;
    background: var(--navbar-current-property-color);
    content: '';
    position: absolute;
    bottom: calc(var(--nav-menu-item-border-width) * -1);
    left: var(--nav-menu-item-padding-inline);
    right: var(--nav-menu-item-padding-inline);
  }
  .current-nav-menu-item:visited {
    color: var(--amplify-colors-primary-80);
  }
  .current-nav-menu-item:hover {
    color: var(--nav-menu-item-color);
  }

  .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 {
    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);
  }
}

.navbar-badge {
  background-color: var(--amplify-colors-purple-60);
  color: var(--amplify-colors-font-inverse);
}

.navbar--gen2 {
  --navbar-background-color: var(--amplify-colors-purple-80);
  --logo-color: var(--amplify-colors-font-inverse);
  --nav-menu-item-color: var(--amplify-colors-purple-10);
  --navbar-border-color: var(--amplify-colors-purple-60);
  .nav-menu-item {
    &:hover {
      color: var(--amplify-colors-purple-20);
    }
    &:focus {
      color: var(--nav-menu-item-color);
      outline: 2px solid var(--amplify-colors-font-inverse);
    }
  }
  .nav-expander {
    &:hover {
      background-color: var(--amplify-colors-purple-60);
    }
    &:focus {
      background-color: var(--amplify-colors-purple-60);
      box-shadow: 0 0 0 2px var(--amplify-colors-font-inverse);
    }
  }
  .chevron-icon {
    fill: var(--amplify-colors-font-inverse);
  }
}

.skip-to-main {
  position: fixed;
  z-index: 201; // GlobalNav is set to 200
  top: var(--amplify-space-small);
  inset-inline-start: 50%;
  transform: translate(-50%, 0);
  &:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
