.profile-header {
  $component-name: ".profile-header";
  $rem-scale: math.div($size-rem-delphinus, $typo3-size-rem);
  $profile-header-contact-list-item-spacing-in-columns: -2;
  $profile-header-contact-button-padding-bottom: -1;
  $profile-header-contact-details-max-width: 44em;
  $profile-header-affiliation-margin-bottom: -1;
  $profile-header-affiliations-item-padding: -4;
  $profile-header-affiliation-toggle-spacing-top: -5;
  $profile-header-affiliation-toggle-margin-bottom: -3;
  $profile-header-affiliations-secondary-item-spacing: -2;
  $profile-header-affiliations-secondary-content-padding: -1;
  $profile-header-subject-areas-width: 27rem;
  $profile-header-cv-link-padding-vertical: -5;
  $profile-header-cv-link-padding-horizontal: -3;
  $profile-header-cv-link-padding-on-medium: -4;


  //for layouts with sidebar, where we are using the default design at the medium breakpoint
  @mixin default-design-on-medium {
    &__image {
      width: calc(#{$profile-header-image-width-medium} + #{$width-border * 2});

      & + #{$component-name}__cv-link {
        right: spacing($profile-header-cv-link-displace-when-image, $times: -1, $add: spacing("side"), $subtract: $profile-header-image-width-medium * -1);
      }
    }
  }

  @mixin medium-width-design {
    grid-template-areas:
      "name image"
      "title image"
      "affiliation image"
      "secondaryaffiliations secondaryaffiliations"
      "info info"
      "contact contact"
    ;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto auto auto;

    &__image {
      width: calc(#{$profile-header-image-width-medium-side-by-side} + #{$width-border * 2});

      & + #{$component-name}__cv-link {
        right: spacing($profile-header-cv-link-displace-when-image-medium, $times: -1, $add: spacing("side"), $subtract: $profile-header-image-width-medium-side-by-side * -1);
      }
    }

    &__cv-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1; //bring icon and label fully up against each other - then seperate by adding bottom margin to icon below
      padding-top: .6em; //all little notch down on the conent, to make them better visually appear centered
      $size: calc(#{line-height("single")} + #{line-height("single", $include-calc: false, $fontsize-relative: ("current": -1, "target": 1))} + #{spacing($profile-header-cv-link-padding-on-medium)} * 2);
      width: $size;
      height: $size;
      border-radius: 50%;
      margin-bottom: calc(#{line-height("single", $times: -0.5, $include-calc: false)} + #{line-height("single", $include-calc: false, $fontsize-relative: ("current": -1, "target": 1), $times: -0.5)} + #{spacing($profile-header-cv-link-padding-on-medium)} * -1);


      &::before {
        font-size: font-size(1);
        margin-right: 0;
        margin-bottom: spacing(-5);
      }
    }

    &__info {

      &__section--contact-toggle {
        &:not(.profile-header__info__section--no-phone) {
          #{$component-name}__info__contact {
            .contact-list__item--email {
              padding-right: spacing($copy-to-clipboard-button-padding, $subtract: line-height("single", $times: -1, $include-calc: false), $add: spacing($copy-to-clipboard-button-spacing));
  
              .copy-to-clipboard__button {
                display: inline-block;
              }
            }
  
            .contact-list__item__content {
              &__short-label {
                display: none;
              }
  
              &__full-label {
                display: inline;
              }
            }
          }
        }

        &.profile-header__info__section--no-phone {
          #{$component-name}__info__contact {
            flex-direction: column;

            &__toggle {
              grid-template-areas: "location button icons";
              margin-left: 0;

              &__button {
                margin-left: spacing(-2);
              }

              &__location {
                &::before {
                  //align the location icon with the email icon 
                  display: inline-block;
                  text-align: center;
                  width: $contact-list-item-icon-width;
                  margin-right: spacing($contact-list-item-content-spaceing);
                }
              }
            }
          }
        }
      }

      &__contact {
        display: flex;

        .contact-list {
          flex-shrink: 1; //allows the list to shrink, and hence the email to wrap, but flex-shrink is much higher for the toggle, hence the email will only wrap in extreme cases.
          flex-direction: column;

          &__item {
            margin-right: 0;
          }

          dd:last-child {
            margin-bottom: 0;
          }
        }

        &__toggle {
          padding-top: spacing(-5);
          margin-left: spacing(-1);
          width: fit-content;
          display: grid;
          grid-template-areas:
            "location location"
            "button icons"
          ;
          grid-template-columns: auto 1fr;
          align-content: space-between; //if the email wraps onto multiple lines, this will cause the toggle to strect to the full height of the section. Hence making sure that the border that indicates that the toggle is active is attached to the contact details that expands.
          justify-content: start;
          flex-shrink: 10000; //this will force icons to start wrapping away, if the email address is very long

          //We want hover styles to apply to elements inside a button element and not a class, because the button is a different element with different class in typo3 and when used in the pure editor in medarbejder project. And to get rid of the .typo3-delphinus class the selector (as it is parent to the button) we need to go @at-root
          @at-root {
            #{$component-name} {
              button:hover {
                #{$component-name}__info__contact__toggle__location {
                  color: color("foreground-hover");
                }
              }
    
              button:active {
                #{$component-name}__info__contact__toggle__location {
                  color: color("foreground-theme");
                }
              } 
            }
          }

          &__location {
            grid-area: location;
            margin-bottom: spacing(-4);
            color: color("foreground");
            white-space: nowrap; //this effectively sets the min-width of the toggle to be the width of the location (icon, city, building and room)

            @include icon-style {
              @include set-icon("location");
              margin-right: spacing($contact-list-item-content-spaceing);
            }
          }

          &__icons {
            grid-area: icons;
            margin-left: 0;
          }

          &__button {
            grid-area: button;
          }
        }

        &__details {
          padding-top: spacing(-1, $subtract: spacing($profile-header-contact-list-item-spacing-in-columns));

          &__short-listed-item {
            display: none;
          }

          .contact-list {
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-columns: 1fr;
            grid-column-gap: spacing($profile-header-contact-list-column-gap);
            justify-items: start;
            max-width: $profile-header-contact-details-max-width; //prevent the two columns from being spread too wide apart

            &__item {
              grid-column: 1 / 2;
              margin-top: spacing($profile-header-contact-list-item-spacing-in-columns);

              &:first-child {
                margin-top: spacing($profile-header-contact-list-item-spacing-in-columns);
              }

              //with this the profile needs to have at least to profile links in the contact list before the adresse is moved to the second column (i.e. it needs the be a leat the fourth dd with dt's also counting towards 8 - and the hidden email adress also counting for two)
              &--address:nth-child(n+8) {
                grid-row: 1 / span 100;
                grid-column: 2 / 3;
                align-self: start;
              }
            }

            .contact-list__label--visible {
              grid-column: 1 / 3;
              border-top: $width-border solid color("border");
              width: 100%;
              padding-top: spacing(-1);

              //NOTE This supports up to 4 additional adresses, must be updated if profiles with more than 5 addresses exists
              & ~ .contact-list__item--address {
                grid-row: 103;
                margin-top: 0;
              }

              //move the first additional address to the first column
              & + .contact-list__item--address {
                grid-column: 1 / 2;

                //move the thrid additional address to the first column and next row
                & + .contact-list__item--address + .contact-list__item--address {
                  grid-column: 1 / 2;
                  grid-row: 104;
                  margin-top: spacing($profile-header-contact-list-item-spacing-in-columns);

                  //move the fourth additional address and the next row
                  & + .contact-list__item--address {
                    grid-row: 104;
                    margin-top: spacing($profile-header-contact-list-item-spacing-in-columns);
                  }
                }
              }
            }
          }
        }
      }
    }

    &__secondary-contact {
      .contact-list {
        &__item {
          width: fit-content; //make the copy-to-clipboard sit next to the content
        }
      }
    }
  }

  @mixin wide-design {
    grid-template-areas:
      "name name image"
      "title title image"
      "affiliation secondaryaffiliations image"
      "info info info"
      "contact contact contact"
    ;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto auto auto;

    &__image {
      width: calc(#{$profile-header-image-width-wide} + #{$width-border * 2});

      & + #{$component-name}__cv-link {
        right: spacing($profile-header-cv-link-displace-when-image-medium, $times: -1, $add: spacing("side"), $subtract: $profile-header-image-width-wide * -1);
      }
    }

    &__info {
      //put the two sections next to each other
      flex-direction: row;

      &__section {
        padding-left: spacing(-1);
        padding-right: spacing(-1);
        border-bottom: none;
        border-right-width: $width-border;
        position: relative; //for positioning of faux top-border (::before) of contacts details when expanded

        &:first-child {
          padding-left: spacing("side");
        }

        &:last-child {
          border-right: none;
          padding-right: spacing("side");
        }

        &--subject-areas {
          flex: 0 1 spacing(-1, $times: 2, $add: $profile-header-subject-areas-width * $rem-scale);
        }

        &--contact-toggle {
          align-self: start; //when subjects areas are higher than contact, this will make sure that the faux top border on expanded contact info is still positioned correctly

          //optimize positioning and design of details panel when profiles has no subject areas 
          &:only-child {
            #{$component-name}__info__contact__details {
              max-width: spacing("side", $times: 2, $add: $profile-header-contact-details-max-width);
              padding-left: spacing("side");
              padding-right: spacing("side");
            }

            #{$component-name}__info__contact__toggle[aria-expanded="true"] {
              #{$component-name}__info__contact__toggle__button {
                &::after {
                  max-width: spacing("side", $times: 2, $add: $profile-header-contact-details-max-width);
                }
              }
            }
          }
        }
      }

      &__contact {

        &__toggle {
          //add a faux top border for the details below the flipped toggle
          &[aria-expanded="true"] #{$component-name}__info__contact__toggle__button {
            &::after {
              content: "";
              display: block;
              position: absolute;
              bottom: $width-border * -1;
              left: 0;
              width: 100%;
              max-width: spacing(-1, $times: 2, $add: $profile-header-contact-details-max-width);
              height: $width-border;
              background-color: color("border-theme");
            }
          }
        }

        &__details {
          max-width: spacing(-1, $times: 2, $add: $profile-header-contact-details-max-width); //prevent the two columns from being spread too wide apart and the panel from becoming too wide on profiles without keywords
          padding: spacing(-1);
          background-color: color("background");
          box-shadow: $shadow-style-front color("shadow");
          border-top: none;
          position: absolute;
          padding-top: spacing(-1, $subtract: spacing($profile-header-contact-list-item-spacing-in-columns));
          left: 0;
          right: 0;
          z-index: $z-index-pop-over;
          transform: translateY($width-border);
        }
      }
    }

    &__secondary-affiliations {
      @include set-colors("background");

      border-top: none;
      background-color: transparent;
      padding: 0;
      margin-bottom: spacing($profile-header-affiliation-margin-bottom);

      border-left: $width-border solid color("border");
      padding-left: spacing(-1);

      margin-left: spacing(1, $subtract: spacing(-1));

      &__content {
        display: flex;
        flex-direction: column;
      }

      &__header {
        display: none;
      }

      &__overflow-toggle {
        display: inline-block; //show the button (only included if profile has more than three affliations)

        //hide all other secondary affliations except the first one, when the overflow-toggle is present
        & + #{$component-name}__secondary-affiliations__list {
          #{$component-name}__secondary-affiliations__item:not(:first-child) {
            display: none;
          }
        }
      }

      &--show-all {
        #{$component-name}__secondary-affiliations__content {
          padding: spacing($profile-header-affiliations-secondary-content-padding);
          position: absolute;
          z-index: $z-index-pop-over;
          background-color: color("background");
          box-shadow: $shadow-style-front color("shadow");
          max-width: spacing($profile-header-affiliations-secondary-content-padding, $times: 2, $add: $line-width-max);
        }

         #{$component-name}__secondary-affiliations__overflow-toggle {
           @include set-font(0, "single");
           @include set-colors("theme");
           display: flex;
           align-items: center;
           position: absolute;
           margin-top: 0;
           right: spacing($profile-header-affiliations-secondary-content-padding);
           top: spacing($button-padding-vertical, $times: -1, $subtract: line-height("single", $include-calc: false, $times: .5));
           $size: spacing($button-padding-vertical, $times: 2, $add: line-height("single", $include-calc: false));
           width: $size;
           height: $size;
           border-radius: 50%;
           overflow: hidden;
           box-shadow: $shadow-style-front color("shadow");

           @include icon-style {
             @include set-icon("close");
             flex: 0 0 100%;
           }

           & + #{$component-name}__secondary-affiliations__list {
             #{$component-name}__secondary-affiliations__item:not(:first-child) {
               display: block;
               margin-top: spacing($profile-header-affiliations-secondary-item-spacing)
             }
           }
         }

         #{$component-name}__secondary-affiliations__header {
           display: block;
         }
      }

      &__item {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  @mixin widest-design {
    grid-template-areas:
      "image name name"
      "image title title"
      "image affiliation secondaryaffiliations"
      "image cv cv"
      "image info info"
      "contact contact contact"
    ;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto 1fr auto 0px auto auto;

    &__name,
    &__title {
      margin-left: 0;
    }

    &__affiliation {
      margin-left: 0;
    }

    &__image {
      margin-left: spacing(-1);
      margin-right: 0;
      margin-bottom: spacing($profile-header-info-section-bottom-padding);
      align-self: start;
      width: calc(#{$profile-header-image-width-widest} + #{$width-border * 2});

      & ~ #{$component-name}__info {
        //extend faux background of info block behind the image
        &::before {
          width: spacing(-1, $times: 2, $add: $profile-header-image-width-widest);
          left: spacing(-1, $times: -2, $subtract: $profile-header-image-width-widest);
        }
      }
    }

    &__cv-link {
      grid-area: cv;
      justify-self: end;
      left: 0;
      margin-right: spacing(-1);
    }

    &__info {
      padding-left: 0;
      padding-right: 0;

      //for the before element that extends the background behind the image
      position: relative;

      //add faux background, that extends to left - made wider when profile has an image
      &::before {
        content: "";
        width: spacing(-1);
        left: spacing(-1, $times: -1);
      }

      &__section {
        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: spacing(-1);
        }

        &--subject-areas {
          flex: 0 1 spacing(-1, $add: $profile-header-subject-areas-width * $rem-scale);
        }
        
        &--contact-toggle {
          //optimize positioning and design of details panel when profiles has no subject areas 
          &:only-child {
            #{$component-name}__info__contact__details {
              max-width: spacing(-1, $times: 2, $add: $profile-header-contact-details-max-width);
              padding-left: spacing(-1);
              padding-right: spacing(-1);
              left: spacing(-1, $times: -1);
            }

            #{$component-name}__info__contact__toggle[aria-expanded="true"] {
              #{$component-name}__info__contact__toggle__button {
                &::after {
                  max-width: spacing(-1, $times: 2, $add: $profile-header-contact-details-max-width);
                  left: spacing(-1, $times: -1);
                }
              }
            }
          }
        }
      }

      &__contact__details {
        padding-left: spacing(-1);
        padding-right: spacing(-1);
      }
    }

    &__secondary-contact {
      padding-left: spacing(-1);
      padding-right: spacing(-1);
    }
  }

  display: grid;
  grid-template-areas:
    "name name"
    "title image"
    "affiliation image"
    "secondaryaffiliations secondaryaffiliations"
    "info info"
    "contact contact"
  ;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto auto auto;
  grid-column-gap: spacing(-1);
  position: relative;

  &__name {
    grid-area: name;
    @include set-font($typography-h1-fontsize, "single", $weight: "bold");
    margin: 0 spacing($page-padding-side) spacing(-2, $subtract: spacing(-5)) spacing($page-padding-side);
  }

  &__title {
    grid-area: title;
    @include set-font(0, "single");
    margin-left: spacing($page-padding-side);
    margin-top: spacing(-5);
    margin-bottom: spacing(-4);
  }

  &__affiliation {
    grid-area: affiliation;
    align-self: end;
    @include set-font(0, "single");
    margin-left: spacing($page-padding-side);
    padding-bottom: spacing($profile-header-affiliation-margin-bottom);

    &__primary {
      color: color("foreground-secondary");

      a {
        display: inline-flex; //must be inline for the tooltip button to be placed next to the link in pure editor
        flex-direction: column;
        align-content: start;

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

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

        &:focus-visible {
          outline: $outline-width solid color("utility-focus");
          outline-offset: $outline-offset + $width-border;
        }
      }
      
      span:first-child {
        @include icon-style($position: "after") {
          @include set-icon("link-external");
          margin-left: spacing(-5);
        }
      }
    }

    &__toggle {
      display: block;
      @include set-font(-1, "single");
      color: color("foreground-secondary");
      text-align: left;
      margin-top: spacing($profile-header-affiliation-toggle-spacing-top);
      margin-bottom: spacing($profile-header-affiliation-margin-bottom, $times: -1);
      padding-bottom: spacing($profile-header-affiliation-toggle-margin-bottom);

      @include icon-style($position: "after") {
        @include set-icon("expand");
        display: inline-block;
        margin-left: spacing(-5);
        transform: rotate(0deg);
        transition: transform $animation-timing-expand-flip $easing-in-out;
      }

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

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

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

      &[aria-expanded=true] {
        background-image: linear-gradient(color("border-theme"), color("border-theme"));
        background-size: 100% $nav-width-active-style;
        background-position: center bottom;
        background-repeat: no-repeat;

        &::after {
          transform: rotateX(-180deg);
        }
      }
    }
  }

  &__image {
    grid-area: image;
    @include set-font(-1, "single"); //setting font size on image to the same as the cv-link in order to be sure, the the negative bottom maring of half a line-height is exactly the same for both the image and the cv link
    margin-right: spacing($page-padding-side);
    align-self: end;
    position: relative;
    z-index: $z-index-just-above-static;
    height: auto;
    width: calc(#{$profile-header-image-width-default} + #{$width-border * 2});
    object-fit: cover;
    object-position: center top;
    border: $width-border solid color("background");
    border-top-width: 0;
    margin-bottom: spacing($profile-header-info-section-top-padding, $times: -1, $subtract: line-height("single", $times: 0.5));

    img {
      display: block;
    }

    & + #{$component-name}__cv-link {
      position: relative;
      align-self: end;
      justify-self: end;
      margin-right: 0;
      right: spacing($profile-header-cv-link-displace-when-image, $times: -1, $add: spacing("side"), $subtract: $profile-header-image-width-default * -1);
    }
  }

  &__cv-link {
    grid-area: image;
    align-self: end;
    @include set-colors("theme");
    @include set-font(-1, "single");
    width: fit-content;
    z-index: $z-index-just-above-static + 1;
    padding: spacing($profile-header-cv-link-padding-vertical) spacing($profile-header-cv-link-padding-horizontal);
    border: $width-border solid color("background");
    margin-bottom: spacing($profile-header-info-section-top-padding, $times: -1, $subtract: line-height("single", $times: 0.5));
    margin-right: spacing("side");

    @include icon-style {
      @include set-icon("curriculum-vitae");
      display: inline-block;
      margin-right: spacing(-5);
    }

    &:hover {
      background-color: color("theme-hover");
      box-shadow: $shadow-style-front color("shadow");
    }

    &:active {
      box-shadow: $shadow-style-back color("shadow");
    }
  }

  &__info {
    grid-area: info;
    display: flex;
    flex-direction: column;

    //for faux background added in max width breakpoint
    &::before {
      content: none;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: color("background");
    }

    &__section {
      @include content-container;
      background-color: color("background");
      padding: spacing($profile-header-info-section-top-padding) spacing("side") spacing($profile-header-info-section-bottom-padding) spacing("side");

      border-color: color("border");
      border-style: solid;
      border-width: 0;
      border-bottom-width: $width-border;

      &:last-child {
        border-bottom: none;
      }

      &__header {
        @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
        margin-bottom: 0;
      }

      &--contact {
        flex: 1 1 auto;
        padding-bottom: spacing($profile-header-info-section-bottom-padding, $subtract: spacing($profile-header-contact-short-list-item-spacing));
      }

      &--contact-toggle {
        padding-bottom: 0;
        position: relative;
      }

      &--contact-toggle:not(#{$component-name}__info__section--no-phone) {
        #{$component-name}__info__contact {
          .contact-list__item--email {
            padding-right: 0;

            .copy-to-clipboard__button {
              display: none;
            }
          }

          .contact-list__item__content {
            &__short-label {
              display: inline;
            }

            &__full-label {
              display: none;
            }
          }
        }
      }

      .tags {
        margin-top: spacing(-5);
      }
    }

    &__contact {

      .contact-list {
        display: flex;
        flex-wrap: wrap;
        padding-top: spacing(-5);
        padding-bottom: spacing(-3, $subtract: spacing($profile-header-contact-short-list-item-spacing)); //if the email wraps onto a lot of lines, this will make sure that there is a little spacing at the bottom

        &__item {
          width: fit-content;
          margin-top: 0;
          margin-bottom: spacing($profile-header-contact-short-list-item-spacing);

          //if the item is not the last-child add margin to the next item
          //TODO when Safari has widespread support for gap in flexbox simply set this as the row-gap on the parent instead
          &:not(:last-child) {
            margin-right: spacing(0);
          }

          &__content {
            &__short-label {
              display: none;
            }
          }
        }
      }

      &__toggle {
        flex: 0 0 auto;
        display: flex;
        width: 100%;
        @include set-font(0, "single");
        color: color("foreground-secondary");

        &__location {
          text-align: left;
          flex: 0 0 auto;

          //We want hover styles to apply to elements inside a button element and not a class, because the button is a different element with different class in typo3 and when used in the pure editor in medarbejder project. And to get rid of the .typo3-delphinus class the selector (as it is parent to the button) we need to go @at-root
          @at-root {
            #{$component-name} {
              button:hover {
                #{$component-name}__info__contact__toggle__location {
                  color: color("foreground-secondary-hover");
                }
              }
    
              button:active {
                #{$component-name}__info__contact__toggle__location {
                  color: color("foreground-theme");
                }
              }
            }
          }
        }

        &__icons {
          flex: 0 1 auto;
          display: flex;
          flex-wrap: wrap; //we let icons wrap away (overflow:hidden) when there is no room for them
          overflow: hidden;
          height: line-height("single");
          margin-left: spacing(-4);

          span {
            @include icon-style;
            margin-left: spacing(-5);

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

          //clever shit that will also make the first icon wrap away, when there is no room for it.
          &::before {
            content: "";
            display: block;
            height: line-height("single");
          }

          //We want hover styles to apply to elements inside a button element and not a class, because the button is a different element with different class in typo3 and when used in the pure editor in medarbejder project. And to get rid of the .typo3-delphinus class the selector (as it is parent to the button) we need to go @at-root
          @at-root {
            #{$component-name} {
              button:hover {
                #{$component-name}__info__contact__toggle__icons {
                  color: color("foreground-secondary-hover");
                }
              }
    
              button:active {
                #{$component-name}__info__contact__toggle__icons {
                  color: color("foreground-theme");
                }
              }
            }
          }
        }

        &__button {
          flex: 0 0 auto;
          color: color("foreground");
          margin-right: spacing(-3);
          padding-bottom: spacing($profile-header-contact-button-padding-bottom);
          white-space: nowrap;

          background-image: linear-gradient(color("border"), color("border"));
          background-size: 100% 0;
          background-repeat: no-repeat;
          background-position: center bottom;

          @include icon-style {
            @include set-icon("expand");
            display: inline-block;
            margin-right: spacing(-5);
            transform: rotate(0deg);
            transition: transform $animation-timing-expand-flip $easing-in-out;
          }

          //We want hover styles to apply to elements inside a button element and not a class, because the button is a different element with different class in typo3 and when used in the pure editor in medarbejder project. And to get rid of the .typo3-delphinus class the selector (as it is parent to the button) we need to go @at-root
          @at-root {
            #{$component-name} {
              button:hover {
                #{$component-name}__info__contact__toggle__button {
                  color: color("foreground-hover");
                }
              }
    
              button:active {
                #{$component-name}__info__contact__toggle__button {
                  color: color("foreground-theme");
                }
              }

              button:focus-visible {
                #{$component-name}__info__contact__toggle__button {
                  outline: $outline-width solid color("utility-focus");
                  outline-offset: $outline-offset;
                }
              }

              button[aria-expanded="true"] #{$component-name}__info__contact__toggle__button {
                background-image: linear-gradient(color("border-theme"), color("border-theme"));
                background-size: 100% $nav-width-active-style;
      
                &::before {
                  transform: rotateX(-180deg);
                }
              }
            }
          }
        }
      }

      &__details {
        border-top: $width-border solid color("border-theme");
        padding-bottom: spacing(0);
        flex: 0 0 100%;
      }
    }
  }

  &__secondary-affiliations {
    grid-area: secondaryaffiliations;

    @include set-colors("background-secondary");
    margin-bottom: $width-border;

    padding: spacing($profile-header-info-section-top-padding) spacing($page-padding-side) spacing($profile-header-info-section-bottom-padding) spacing($page-padding-side);

    border-top: $width-border solid color("border-theme");

    &__header {
      margin-top: 0;
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    }

    &__overflow-toggle {
      display: none; //hide the button in default viewport width
      @include set-font(-1, "single");
      color: color("foreground-secondary");
      align-self: start;
      order: 100; //move the toggle after the list
      margin-top: spacing($profile-header-affiliation-toggle-spacing-top);

      @include icon-style($position: "after") {
        @include set-icon("expand");
        margin-left: spacing(-5);
      }

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

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

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

    &__list {
      //reset default ul's
      max-width: none;
      margin: 0;
    }

    &__item {
      //reset default li's
      margin: 0;
      padding: 0;
      //remove default bullet on li's
      &::before {
        content: none;
      }

      line-height: line-height("single");
      width: fit-content;

      display: flex; //overwrite faux padding on display: list-item;
      flex-direction: column;
      max-width: $line-width-max;
      position: relative; //for popover on larger screens

      margin-top: spacing($profile-header-affiliations-secondary-item-spacing);

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

      &__title {
        color: color("foreground-secondary");
        margin: 0;
        text-align: left;

        @include icon-style($position: "after") {
          @include set-icon("link-external");
          margin-left: spacing(-5);
        }

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

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

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

  &__secondary-contact {
    grid-area: contact;
    padding-top: spacing(0, $subtract: spacing($contact-list-item-spaceing));
    padding-left: spacing("side");
    padding-right: spacing("side");
  }

  //output the breakpoints for typo3 layouts - if false; will output breakpoints for plain delphinus instead used in medarbejdere project
  @if $profile-header-inside-typo3 {
    .layout16 & {
      @include breakpoint("medium") {
        @include medium-width-design;
      }

      @include breakpoint("wide") {
        @include wide-design;
      }

      @include breakpoint("max-width") {
        @include widest-design;

        margin-left: spacing($page-padding-side);
        margin-right: spacing($page-padding-side);
      }
    }

    .layout16.universe.staff &,
    .layout16.universe.student &,
    .layout16.aarhus-bss & {
      @include breakpoint("max-width") {
        margin-left: 0;
        margin-right: 0;

        padding-left: spacing("side", $subtract: spacing(-1));

        #{$component-name}__cv-link {
          margin-right: spacing("side");
        }

        #{$component-name}__info {
          &::before {
            width: spacing("side");
            left: spacing("side", $times: -1);
          }

          &__section {
            &:last-child {
              padding-right: spacing("side");
            }
          }
        }

        #{$component-name}__image {
          & ~ #{$component-name}__info {
            //extend faux background of info block behind the image
            &::before {
              width: spacing(-1, $add: spacing("side"), $subtract: "#{$profile-header-image-width-widest * -1} + #{$width-border * -2}");
              left: spacing(-1, $times: -1, $subtract: spacing("side"), $add: "#{$profile-header-image-width-widest * -1} + #{$width-border * -2}");
            }
          }
        }
      }
    }

    .layout15 & {
      @include breakpoint("medium") {
        @include default-design-on-medium;
      }

      @include breakpoint("wide") {
        @include medium-width-design;
      }

      @include breakpoint("max-width") {
        @include wide-design;

        margin-right: spacing($page-padding-side);
      }
    }

    .layout15.universe.staff &,
    .layout15.universe.student &,
    .layout15.aarhus-bss & {
      @include breakpoint("max-width") {
        margin-right: 0;
      }
    }
  }
  @else {
    //output breakpoints for when used inside plain delphinus - in medarbejdere project
    @include breakpoint("medium") {
      @include default-design-on-medium;
    }

    @media (min-width: #{$typo3-breakpoint-medium}) {
      @include medium-width-design;
    }

    @media (min-width: #{$typo3-breakpoint-large}) {
      @include wide-design;
    }

    @media (min-width: #{$typo3-page-max-width}) {
      @include widest-design;

      margin-left: spacing($page-padding-side);
      margin-right: spacing($page-padding-side);
    }
  }
}