spawntree
/
ihk24


			
				
					
						
						
							
							@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.anchor-links {
  position: relative;
  margin: 48px 0;

  &.sticky {
    position: sticky;
    display: none !important;
    top: 99px;
    z-index: 10;
    height: 0;
    margin: 0 -10px;
    @include hide;

    &.show {
      @include show;
    }

    .anchors {
      margin: -1px 0 0;
      height: 55px;
      overflow: hidden;
      background-color: var(--color-background);
      transition: 0.3s ease;
      box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0), 0 0 0 10000px rgba(0, 0, 0, 0);

      &:hover {
        height: auto;
        box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.2), 0 0 0 10000px rgba(0, 0, 0, 0.06);

        .anchors-title {
          display: none;
        }
      }
    }

    .anchors-title {
      display: flex;
    }

    a, .anchors-title {
      padding: 12px 25px 16px 52px;
    }

    .anchors-title, a.current {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    li:before {
      left: 12px;
    }
  }

  .anchors {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-surface-inset);

    li {
      position: relative;
      border-top: 1px solid var(--color-surface-inset);
      line-height: 1.2;

      &:before {
        @include icon-ankerlink;
        font-family: "Icons", sans-serif;
        position: absolute;
        font-size: 30px;
        line-height: 1;
        left: 3px;
        top: 50%;
        margin-top: -15px;
        color: var(--color-text-microsite-secondary);
        z-index: 1;
        pointer-events: none;
      }
      &:hover {
        &:before {
          color: var(--color-text-accent);
        }
      }
    }

    a, .anchors-title {
      position: relative;
      display: flex;
      padding: 14px 15px 14px 42px;
      align-items: center;
      min-height: 55px;
      background-color: var(--color-background);
      margin: 0;
    }

    .anchors-title {
      display: none;
    }

    a {
      transition: 0.3s ease;
      font-weight: 400;
      @include focus-visible;

      &:before {
        content: '';
        @include full-size;
        background-color: var(--swatches-primary-100);
        opacity: 0;
        transition: 0.3s ease;
        z-index: -1;
      }

      &:hover {
        &:before {
          opacity: 0.3;
        }
      }
    }
  }

  .anchors li.anchors-title, .anchors li.anchors-title {
    margin: 0;

    &:after {
      display: none;
    }
  }
}

h2.has-anchor {
  position: relative;
  font-size: var(--font-size-h2);

  .anchor {
    position: absolute;
    top: -140px;

    @media(max-width: 767px) {
      top: -100px;
    }
  }
}