.contact-list {
  $component-name: ".contact-list";
  $rem-scale: math.div($size-rem-delphinus, $typo3-size-rem);
  $contact-list-item-content-context-links-spaceing: -3;

  max-width: none;
  padding: 0;
  margin: 0;

  &__label {
    @include screenreader-only;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");

    &--visible {
      @include screenreader-only($unset: true);
      margin-top: spacing(0);
      margin-bottom: spacing(-3);

      & + #{$component-name}__item {
        margin-top: 0;
      }
    }
  }

  &__item {
    max-width: $line-width-max;
    position: relative;
    @include set-font(0, "single");
    padding-left: spacing($contact-list-item-content-spaceing, $add: $contact-list-item-icon-width);

    margin-top: spacing($contact-list-item-spaceing);
    margin-left: 0;

    &:first-child {
      margin-top: 0;
    }

    @include icon-style {
      display: inline-flex;
      justify-content: center;
      position: absolute;
      left: 0;
      top: 0;
      width: $contact-list-item-icon-width;
      color: color("foreground-branding");
      text-align: center;
    }

    &--phone {
      @include set-icon("phone", $include-pseudo: "before");
    }

    &--phone-landline {
      @include set-icon("phone-landline", $include-pseudo: "before");
    }

    &--email {
      @include set-icon("email", $include-pseudo: "before");

      a[href^="mailto:"]{
        white-space: normal;
        word-break: break-all;
      }
    }

    &--orcid {
      @include set-icon("brand-orcid", $include-pseudo: "before");
    }

    &--researchgate {
      @include set-icon("brand-researchgate", $include-pseudo: "before");
    }

    &--mendeley {
      @include set-icon("brand-mendeley", $include-pseudo: "before");
    }

    &--x {
      @include set-icon("brand-x", $include-pseudo: "before");
    }

    &--linkedin {
      @include set-icon("brand-linkedin", $include-pseudo: "before");
    }

    &--facebook {
      @include set-icon("brand-facebook", $include-pseudo: "before");
    }

    &--link {
      @include set-icon("link-chain", $include-pseudo: "before");
      a {
        white-space: normal;
        word-break: break-all;
      }
    }

    &--address {
      @include set-icon("location", $include-pseudo: "before");
    }

    &--orcid,
    &--researchgate,
    &--mendeley,
    &--x,
    &--linkedin,
    &--facebook {
      @include icon-style($style: "brands");
    }

    &__content {
      flex: 1 1 auto;

      &__context-links {
        margin-top: spacing($contact-list-item-content-context-links-spaceing);
      }

      &__hidden {
        @include screenreader-only;
      }
    }

    ul {
      margin: 0;
    }

    address {
      display: grid;
      gap: spacing(-5);
      width: fit-content;
    }

    a:not(.a--text-link) {
      background-image: none;
      text-shadow: none;

      &:hover {
        color: color("foreground-hover");
        outline: none;
      }

      &:active {
        color: color("foreground-theme");
        outline: none;
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset + $width-border;
      }

      &[target="_blank"] {
        @include icon-style($position: "after") {
          @include set-icon("link-external");
          margin-left: spacing(-5);
          color: color("foreground-secondary");
        }

        &:hover {
          &::after {
            color: color("foreground-hover");
          }
        }
      }
    }
  }
}