ihk24/templates/source/sass/partials/objects/_anchors.scss

@charset "UTF-8";

.main-col .anchorlinks, article.col .anchorlinks, .action-col .anchorlinks {
  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: white;
      transition: 0.3s ease;
      box-shadow: 0 5px 20px -5px rgba($color-black, 0), 0 0 0 10000px rgba($color-black, 0);

      &:hover {
        height: auto;
        box-shadow: 0 5px 20px -5px rgba($color-black, 0.2), 0 0 0 10000px rgba($color-black, 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;
    }
  }
}

.main-col .anchors, article.col .anchors, .action-col .anchors {
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid $color-primary-light-03;
  border-bottom: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);

  li {
    position: relative;
    border-top: 1px solid $color-primary-light-03;
    border-top: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);
    line-height: 1.2;
    @extend .icon-ankerlink;

    &:before {
      font-family: "Icons";
      position: absolute;
      font-size: 30px;
      line-height: 1;
      left: 3px;
      top: 50%;
      margin-top: -15px;
      color: $color-secondary;
      color: var(--theme-color-secondary, $color-secondary);
      z-index: 1;
      pointer-events: none;
    }
  }

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

  .anchors-title {
    display: none;
  }

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

    &:before {
      content: "";
      @include fullsize;
      background-color: $color-primary-light-04;
      background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
      opacity: 0;
      transition: 0.3s ease;
    }

    &:hover {
      color: $color-link-hover;
      color: var(--theme-color-link-hover, $color-link-hover);

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

.main-col .anchors li:not(.anchors-title),.action-col .anchors li:not(.anchors-title) {
  padding: 0;
  margin: 0;

  &:after {
    display: none;
  }
}

.main-col .anchors li.anchors-title, .action-col .anchors li.anchors-title{
  margin: 0;

  &:after {
    display: none;
  }
}

h2.has-anchor {
  position: relative;

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

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