/*
 * DO NOT EDIT THIS FILE.
 * It's generated automatically by 'yarn build' command.
 * @preserve
 */

.m-anchors {
  --m-anchors-arrow-size: 1rem;
  --m-anchors-arrow-gradient-direction: -90deg;

  position: relative;
}

.m-anchors__size {
  height: var(--m-anchors-height);
}

.m-anchors__sticky {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--m-anchors-height);
  background-color: var(--color-background-secondary);
}

.m-anchors__sticky--fixed {
  position: fixed;
  z-index: var(--z-index-anchors);
  top: calc(var(--p-page-header-height) + var(--drupal-displace-offset-top));
}

.m-anchors__link,
.m-anchors__tab {
  position: relative;
  transition: color var(--transition-duration-0-2)
    var(--transition-timing-function-cubic-bezier);
  text-transform: uppercase;
}

.m-anchors__link:hover,
.m-anchors__tab:hover {
  text-decoration: none;
}

@media (hover: hover) {
  .m-anchors__link:hover,
  .m-anchors__tab:hover {
    color: var(--color-text-stroke-primary);
  }
}

.m-anchors__link::after,
.m-anchors__tab::after {
  position: absolute;
  top: calc(100% + 0.125rem);
  left: 0;
  width: 100%;
  /* stylelint-disable-next-line unit-case */
  height: 0.125rem;
  content: '';
  transition: opacity var(--transition-duration-0-2)
    var(--transition-timing-function-cubic-bezier);
  pointer-events: none;
  opacity: 0;
  background-image: var(--color-gradient-transparent-fading-lines);
}

.m-anchors__link--active,
.m-anchors__tab--active {
  color: var(--color-text-stroke-primary);
}

.m-anchors__link--active::after,
.m-anchors__tab--active::after {
  opacity: 1;
}

.m-anchors__tab {
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  line-height: 1.16;
  -webkit-appearance: none;
  appearance: none;
}