ihk24/gfi-ihk-2024/stories/components/linklist/linklist.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.linklist {
  --linklist-icon-padding: 38px;
  --linklist-focus-padding: 6px;

  @media(max-width: 999px) {
    --linklist-icon-padding: 30px;
  }
}

.sidebar .linklist > li {
  margin-bottom: 6px;
  line-height: 1.4;

  > a {
    padding-left: 34px;

    &:before {
      top: 2px;
      font-size: 24px;
    }
  }
}

.linklist, .richtext .linklist {
  list-style: none;
  padding: 0;
  margin: 1em 0;

  > li {
    position: relative;
    margin: 0 0 8px;
    padding-left: var(--linklist-icon-padding);

    &:after {
      display: none !important;
    }

    @media(max-width: 767px) {
      margin-bottom: 4px;
    }

    > a {
      position: relative;
      display: inline-block;
      transition: 0.2s $easeOutQuad;
      transform: translate3d(0, 0, 0);
      text-underline-offset: 3px;
      padding: 4px var(--linklist-focus-padding) 4px calc(var(--linklist-icon-padding) + var(--linklist-focus-padding));
      line-height: 1.3;
      font-weight: 400;
      margin-left: calc(var(--linklist-icon-padding) * -1 - var(--linklist-focus-padding));
      margin-right: -4px;
      border-radius: 3px;
      @include focus-visible;

      &:before {
        @include icon-pfeil-simple-rechts;
        position: absolute;
        top: calc(var(--font-size-copy) * 0.65 - var(--icon-size) / 2 + 4px);
        font-family: "Icons", sans-serif;
        font-size: var(--icon-size);
        line-height: 1;
        left: calc(var(--linklist-focus-padding) * 0.5);
        transform: translate3d(0, 0, 0);
        text-decoration: underline;
      }

      &:before {
        text-decoration: none;
      }

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

    a.download:before {
      @include icon-download;
    }
    a.external:before, a.extern:before {
      @include icon-link-external;
    }
    a.intranet:before {
      @include icon-schloss;
    }
    a.extranet:before {
      @include icon-stern;
    }
  }

  > li > p, > li > div.text {
    font-size: var(--font-size-small);
    margin-top: 6px;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 14px;
    }
  }
}