@layer components {
  .in-page-nav {
    position: sticky;
    top: var(--header-height, 0);
    height: auto;
    width: 100%;
    z-index: 10;
    background: var(--ui-in-page-nav-bg);
    border-bottom: solid calc(var(--ui-in-page-nav-bottom-border-weight) * 1px) var(--ui-in-page-nav-bottom-border);
    gap: var(--ui-in-page-nav-gap);
  }
  .in-page-nav .label {
    color: var(--ui-in-page-nav-title);
    padding-inline: var(--ui-in-page-nav-item-padding-left-right);
    padding-block: var(--ui-in-page-nav-item-padding-top-bottom);
  }
  .in-page-nav .tabs__link {
    text-decoration: none;
    background: var(--ui-in-page-nav-item-bg);
    color: var(--ui-in-page-nav-item-text);
    border: none;
    border-radius: var(--radius-nil);
    box-shadow: inset 0 0 0 calc(var(--general-focus-border-weight) * 1px) var(--ui-in-page-nav-item-border);
    padding-inline: var(--ui-in-page-nav-item-padding-left-right);
    padding-block: var(--ui-in-page-nav-item-padding-top-bottom);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .in-page-nav .tabs__link:hover {
    background: var(--ui-in-page-nav-item-hover-bg);
    color: var(--ui-in-page-nav-item-hover-text);
    box-shadow: inset 0 0 0 calc(var(--general-focus-border-weight) * 1px) var(--ui-in-page-nav-item-hover-border);
  }
  .in-page-nav .tabs__link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 calc(var(--general-focus-border-weight) * 1px) var(--general-focus-border);
  }
  .in-page-nav .tabs__link.active {
    background: var(--ui-in-page-nav-item-active-bg);
    color: var(--ui-in-page-nav-item-active-text);
    box-shadow: inset 0 0 0 calc(var(--general-focus-border-weight) * 1px) var(--ui-in-page-nav-item-active-border);
  }
  @media (min-width: 992px) {
    .in-page-nav .tabs__link {
      width: -moz-max-content !important;
      width: max-content !important;
    }
  }
  :root:has(.sdm-wrapper--hidden, .lmm-wrapper--hidden, .adm-wrapper--hidden) .in-page-nav {
    top: 0;
  }
}