@import './variables';

.docs-toc {
  display: none;
  transition: right var(--amplify-time-medium) ease;
  position: fixed;
  right: -14rem;
  background-color: var(--amplify-colors-background-primary);
  font-size: var(--amplify-font-sizes-small);

  &:hover {
    right: 0;
  }

  @media (min-width: $breakpoint-xl) {
    display: block;
    position: relative;
    right: 0;
    width: 16rem;
    flex-shrink: 0;
  }
}

.docs-toc-inner {
  position: sticky;
  width: 16rem;
  height: calc(
    100vh - var(--docs-header-height) - var(--docs-dev-center-nav-height)
  );
  flex-shrink: 0;
  top: calc(var(--docs-header-height) + var(--docs-dev-center-nav-height));
  right: 0;
  padding: var(--amplify-space-medium);
}

.docs-toc-heading {
  color: var(--amplify-colors-font-tertiary);
  font-weight: var(--amplify-font-weights-bold);
  padding: var(--amplify-space-xs) var(--amplify-space-medium);
}

.docs-toc-link {
  display: block;
  padding: var(--amplify-space-xxs) var(--amplify-space-medium);
  text-decoration: none;
  color: var(--amplify-colors-font-tertiary);
  position: relative;

  &.active {
    color: var(--amplify-colors-font-primary);
    font-weight: var(--amplify-font-weights-bold);
  }

  &.level-H3 {
    margin-left: var(--amplify-space-medium);
  }
}
