@import './_variables.scss';

@keyframes showSidebar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes showOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.docs-sidebar {
  display: block;

  &.collapsed {
    display: none;
    @media (min-width: $breakpoint-large) {
      display: block;
      .docs-home & {
        display: none;
      }
    }
  }
}

.docs-sidebar-spacer {
  width: 0;

  // desktop
  @media (min-width: $breakpoint-large) {
    flex-shrink: 0;
    width: 20rem;
    position: relative;

    .docs-home & {
      width: 0;
    }
  }
}

.docs-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: var(--amplify-colors-overlay-40);

  .expanded > & {
    width: 100vw;
    height: 100vh;
    opacity: 1;
    animation: showOverlay var(--amplify-time-long) forwards;
  }

  @media (min-width: $breakpoint-large) {
    .expanded > & {
      display: none;
    }

    .docs-home .expanded > & {
      display: block;
    }
  }
}

.docs-sidebar-inner {
  // For mobile screens, take up 90% width
  --width: 90vw;
  // Tablet and up use a fixed width
  @media (min-width: $breakpoint-small) {
    --width: 20rem;
  }

  // This is to get the secondary link text lined up with the primary nav item
  --secondary-nav-indent: calc(1.25rem + var(--amplify-space-small) * 2);
  --tertiary-nav-indent: calc(
    var(--secondary-nav-indent) + var(--amplify-space-medium)
  );

  --amplify-components-accordion-item-trigger-padding-inline: 0;
  --amplify-components-accordion-item-trigger-padding-block: 0;
  --amplify-components-accordion-item-trigger-gap: 0;
  --amplify-components-accordion-item-border-width: 0;

  --amplify-components-accordion-item-content-padding-inline: 0;
  --amplify-components-accordion-item-content-padding-block-start: 0;
  --amplify-components-accordion-item-content-padding-block-end: 0;

  .amplify-accordion__item__trigger {
    padding-inline-end: var(--amplify-space-xs);
  }

  height: calc(100vh - var(--docs-dev-center-nav-height));
  width: var(--width);
  overflow-y: auto;
  position: fixed;
  top: var(--docs-dev-center-nav-height);
  left: 0;
  padding: var(--amplify-space-medium) var(--amplify-space-medium);
  border-right: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-secondary);
  background-color: var(--amplify-colors-background-primary);
  z-index: 99999;
  transform: translateX(calc(-1 * var(--width)));

  .expanded > & {
    animation: showSidebar var(--amplify-time-long) forwards;
  }

  @media (min-width: $breakpoint-large) {
    transform: translateX(0);
    width: var(--width);
    .docs-home & {
      transform: translateX(-100%);
    }

    .expanded > & {
      transform: translateX(0);
      width: var(--width);
    }
  }
}

.docs-sidebar-nav {
  & .amplify-expander__content {
    padding-inline: 0;
  }

  & .amplify-expander__content__text {
    padding-block: 0;
  }
}

.docs-secondary-nav-link,
.docs-tertiary-nav-link {
  display: block;
  padding: var(--amplify-space-xs) var(--amplify-space-small);
  font-size: var(--amplify-font-sizes-small);
  color: var(--amplify-colors-font-secondary);
  text-decoration: none;
  &:hover,
  &.current {
    color: var(--amplify-colors-font-hover);
    background-color: var(--amplify-colors-primary-10);
  }

  &:active {
    background-color: var(--amplify-colors-primary-20);
  }
}

.docs-secondary-nav-link {
  padding-inline-start: var(--secondary-nav-indent);
}

.docs-tertiary-nav-link {
  padding-inline-start: var(--tertiary-nav-indent);
}

.docs-sidebar-menu-button {
  @media (min-width: $breakpoint-large) {
    display: none;
  }

  .docs-home & {
    display: inline-flex;
  }
}
