.pure-profile-editor {
  $component-name: ".pure-profile-editor";
  $pure-profile-editor-button-padding: -5;
  $pure-profile-no-alt-lang-sapcing: -4;
  $pure-profile-editor-profile-links-vertical-margin: -2;
  $pure-profile-editor-texts-empty-state-top-margin: spacing(-3, $times: 2, $subtract: line-height("single", $include-calc: false, $times: -1, $fontsize-relative: ("current": 0, "target": $typography-h1-fontsize - 1)), $add: spacing(-2));

  @include content-container;

  &__none-editable-item {
    color: color("foreground");
  }

  &__no-alt-language {
    margin-top: spacing($pure-profile-no-alt-lang-sapcing);
    color: color("foreground-secondary");

    .icon {
      display: flex;
      @include set-icon("info-circle", $include-pseudo: "before");
    }

    .truncator + & {
      margin-top: spacing($typography-margin-p, $times: -1, $add: spacing($pure-profile-no-alt-lang-sapcing));
    }

    .profile-header__title & {
      margin-top: $width-border;

      .icon__label {
        //text-wrap: balance;
        span {
          margin-right: .25em;
        }

        .tooltip {
          margin-left: 0;
        }
      }
    }
  }

  &__button {
    display: inline-block;
    @include set-colors("theme");
    @include set-font(-1, "single");
    box-shadow: $shadow-style-front color("shadow");
    padding: spacing(-5) spacing(-4);
    flex: 0 0 auto;
    white-space: nowrap;

    @include icon-style {
      @include set-icon("edit");
      margin-right: spacing(-5);
    }

    &:hover {
      background-color: color("theme-hover");
    }

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

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

    &--hide-label {
      display: flex;
      align-items: stretch;
      z-index: $z-index-above-content;
      padding: 0;
      $size: spacing($pure-profile-editor-button-padding, $times: 2, $add: line-height("single", $include-calc: false));
      width: $size;
      height: $size;
      overflow: hidden;
      border-radius: 50%;

      &::before {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 100%;
      }
    }

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

  &__image {
    grid-area: image;
    align-self: end;
    z-index: $z-index-just-above-static + 1;
    position: relative; //for positioning of edit button and palceholder

    #{$component-name}__button {
      position: absolute;
      top: 0;
      left: $width-border;
      transform: translate3d(spacing($pure-profile-editor-button-padding, $times: -1), spacing($pure-profile-editor-button-padding, $times: -1), 0);

      @include typo3-breakpoint("max-width") {
        left: auto;
        right: $width-border;
        transform: translate3d(spacing($pure-profile-editor-button-padding), spacing($pure-profile-editor-button-padding, $times: -1), 0);
      }
    }

    .profile-header__image {
      display: block;
    }

    &__placeholder {
      @include set-font(-1, "single");
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: spacing(-2);
      text-align: center;

      @include icon-style {
        @include set-icon("add");
        @include set-font(1, "single");
        margin-bottom: spacing(-5);
      }
    }

    &--empty {
      a.profile-header__image {
        @include set-colors("theme");
        box-shadow: $shadow-style-front color("shadow");
        position: relative; //for positioning of placeholder text
        border-top-width: $width-border; //when image is present it doesn't have a top border, but we need that for the placeholder design

        svg {
          display: block;
          margin-bottom: $width-border * -1; //compensate for the added top border on container
        }

        &:hover {
          background-color: color("theme-hover");
        }

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

    @include typo3-breakpoint("max-width") {
      align-self: start;
    }
  }

  &__cv {
    position: relative; //for positioning of edit button
    grid-area: image;
    align-self: end;
    justify-self: end;
    z-index: $z-index-just-above-static + 1;
    padding-right: spacing("side");

    //displace the button correctly across breakpoints
    right: spacing($profile-header-cv-link-displace-when-image, $times: -1, $add: $profile-header-image-width-default);

    @include breakpoint("medium") {
      right: spacing($profile-header-cv-link-displace-when-image, $times: -1, $add: $profile-header-image-width-medium);
    }

    @include typo3-breakpoint("medium") {
      right: spacing($profile-header-cv-link-displace-when-image-medium, $times: -1, $add: $profile-header-image-width-medium-side-by-side);
    }

    @include typo3-breakpoint("wide") {
      right: spacing($profile-header-cv-link-displace-when-image-medium, $times: -1, $add: $profile-header-image-width-wide);
    }

    @include typo3-breakpoint("max-width") {
      right: 0;
    }

    #{$component-name}__button {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate3d(spacing($pure-profile-editor-button-padding, $times: -1), spacing($pure-profile-editor-button-padding, $times: -1), 0);

      @include typo3-breakpoint("medium") {
        top: $width-border;
        left: $width-border;
      }

      @include typo3-breakpoint("max-width") {
        left: auto;
        right: spacing("side", $add: $width-border);
        transform: translate3d(spacing($pure-profile-editor-button-padding), spacing($pure-profile-editor-button-padding, $times: -1), 0);
      }
    }

    .profile-header__cv-link {
      right: 0;
      display: flex;
      position: relative;
      margin-right: 0;
    }

    &--empty {
      .profile-header__cv-link {
        @include set-icon("add", $include-pseudo: "before");
        box-shadow: $shadow-style-front color("shadow");

        @include typo3-breakpoint("medium") {
          text-align: center;
          &::before {
            font-size: font-size(-1);
          }
        }

      }
    }

    @include typo3-breakpoint("max-width") {
      grid-area: cv;
      justify-self: end;
    }
  }

  &__profile-header-section {
    @include content-container;
    display: flex;

    #{$component-name}__button {
      margin-top: spacing($profile-header-info-section-top-padding, $times: -1);
      transform: translateY(calc(-50% + #{line-height("single", $times: .5, $include-calc: false)}));
      margin-left: spacing(-5);
    }
  }

  &__contact {
    .profile-header__info__contact {
      .contact-list {
        .contact-list__item {
          @include typo3-breakpoint("medium") {
            margin-right: 0;
            padding-right: 0;
          }
  
          &::before {
            color: color("foreground-disabled");
          }
        }
      }

      &__toggle {
        &__location {
          display: none; //hide the shorthand location on mobile, to allow room for edit button (for SoMe links)

          @include typo3-breakpoint("medium") {
            display: inline-flex; //show the shorthand location again on wider screens
          }

          &::before {
            color: color("foreground-disabled");
          }
        }
      }

      &__details {
        max-width: none; //reset max-width, so we don't have to deal with the faux top border not always having to go full width in the editor, where space for subject areas are always reserved
      } 
    }

    &__toggle {
      display: flex;
      color: color("foreground-secondary");

      &:focus-visible {
        outline: none;

        .profile-header__info__contact__toggle__button {
          outline: $outline-width solid color("utility-focus");
          outline-offset: $outline-offset;
        }
      }

      &[aria-expanded="true"] {
        //hide the edit button for SoMe links, when the panel gets expanded - because the panel also has that button
        & ~ #{$component-name}__contact__edit-links {
          display: none;
        }

        .profile-header__info__contact__toggle__button {
          //add the faux boarder on top of the details panel - we need the style here, because in typo3, the [aria-expanded="true"] is on an other element
          @include typo3-breakpoint("wide") {
            &::after {
              content: "";
              display: block;
              position: absolute;
              bottom: $width-border * -1;
              left: 0;
              width: 100%;
              height: $width-border;
              background-color: color("border-theme");
            }
          }
        } 
      }
    }

    &__edit-links {
      margin-top: spacing($pure-profile-editor-button-padding, $times: -1);
      margin-left: spacing($pure-profile-editor-button-padding, $times: -1);

      &--empty {
        border: $width-border dashed color("border");
        padding: spacing(-5) spacing(-1);
        margin-top: spacing(-5, $times: -1, $subtract: $width-border);
        align-self: start;
      }
    }
    
    &__details {
      display: grid;
      align-items: stretch;
      grid-template-columns: 1fr;

      @include typo3-breakpoint("medium") {
        grid-template-columns: 1fr 1fr;
        column-gap: spacing(-1);
      }

      & > .contact-list {
        display: block;

        .contact-list__item {
          &::before {
            color: color("foreground-disabled");
          }

          .a--text-link {
            background-image: linear-gradient(color("foreground-disabled"), color("foreground-disabled")), linear-gradient(color("foreground-disabled"), color("foreground-disabled"));

            &:hover,
            &:active {
              color: color("foreground-disabled");
            }
          }

          &--address {
            display: flex;
            align-items: start;

            .contact-list__item__content {
              flex: 0 1 auto;
            }

            .tooltip {
              flex: 0 0 auto;
            }
          }
        }
      }   
    }

    &__links {
      @include content-container;
      @include set-colors("background-secondary");
      display: flex;
      flex-direction: column;
      padding: spacing(-2) spacing("side") spacing(-1) spacing("side");
      margin-top: spacing(-1);
      margin-left: spacing("side", $times: -1);
      margin-right: spacing("side", $times: -1);
      width: spacing("side", $times: 2, $add: 100%);

      &__placeholder-icons {
        display: flex;
        column-gap: spacing(-5);
        color: color("foreground-secondary");
        line-height: line-height("single");
      }

      @include typo3-breakpoint("medium") {
        width: auto;
        margin-top: spacing(-2);
        padding: spacing(-2);
        padding-bottom: spacing(-2);
        margin-left: 0;
        margin-right: 0;
      }

      .empty-state {
        justify-content: center;
        flex: 1 0 auto;
      }

      .contact-list {
        padding: 0;

        &__item {
          margin-top: spacing(-2);
          width: 100%;

          &:nth-child(2) {
            margin-top: spacing(-3);
          }
        }
      }
    }
  }

  &__freeform-heading {
    @include content-container;
    max-width: $line-width-max;
    display: flex;
    flex-wrap: wrap;
    column-gap: spacing(-2);
    row-gap: spacing(-3);
    justify-content: space-between;
    margin-bottom: spacing($typography-margin-bottom-h2);

    .icon--heading {
      margin-bottom: 0;
    }

    #{$component-name}__button {
      align-self: center;
    }

    @include breakpoint("medium") {
      justify-content: start;
    }
  }

  &__blurred-cards {
    position: relative; //for positioning of infobox

    --pure-editor-cards-max-height: 22rem;

    &--colleagues {
      --pure-editor-cards-max-height: 16rem;

      #{$component-name}__blurred-cards__info {
        top: spacing($horizontal-scroll-header-margin-bottom, $add: line-height("single", $include-calc: false, $fontsize-relative: ("current": 0, "target": $typography-h1-fontsize - 1)));
      }
    }

    &__info {
      position: absolute;
      z-index: $z-index-just-above-static;
      top: spacing($horizontal-scroll-header-margin-bottom, $add: line-height("single", $include-calc: false, $fontsize-relative: ("current": 0, "target": $typography-h1-fontsize - 2)));
      right: 0;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;


      &__content {
        @include content-container;
        padding: spacing(-1);
        $max-width: spacing(-1, $times: 2, $add: $line-width-max);
        margin-left: spacing(1);
        margin-right: spacing(1);
        background: color("background");
        box-shadow: $shadow-style-center color("shadow");
      }
    }

    .horizontal-scroll__scrollable-content {
      $blur-spacing: -4;
      padding-top: spacing($blur-spacing);
      padding-bottom: spacing($blur-spacing);
      margin-top: spacing($blur-spacing, $times: -1);
      margin-bottom: spacing($blur-spacing, $times: -1);

      .cards-container {
        filter: blur($overlay-blur) grayscale(1);
        opacity: .6;
        min-height: var(--pure-editor-cards-max-height);
      }
    }
  }

  &.profile-header {
    .profile-header__affiliation__primary {
      a {
        span::after {
          content: none;
        }
      }
    }

    .empty-state {
      margin-top: spacing(-4);
      padding-top: spacing(-3);
      padding-bottom: spacing(-3);
      width: 100%;
      margin-left: 0; //overwrite default margin on dd (when we are using the empty-state class on a dd element)

      &__actions:not(:first-child) {
        margin-top: spacing(-3);
      }
    }

    @include typo3-breakpoint("max-width"){
      .profile-header__info {
        &::before {
          content: "";
          width: spacing(-1, $times: 2, $add: $profile-header-image-width-widest);
          left: spacing(-1, $times: -2, $subtract: $profile-header-image-width-widest);
        }
      }
    }
  }

  .person-profile-text {
    .empty-state {
      align-self: stretch;
      justify-content: center;
    }

    &--count {
      &-0,
      &-1,
      &-4 {
        @include breakpoint("wide") {
          grid-template-columns: 1fr 1fr; 
        }
      }

      &-2,
      &-3,
      &-5 {
        @include breakpoint("wide") {
          grid-template-columns: 1fr 1fr; 
        }

        @include typo3-breakpoint("max-width") {
          grid-template-columns: 1fr 1fr 1fr; 
        }
      }

      &-1,
      &-3,
      &-5 {
        @include breakpoint("wide") {
          .empty-state {
            margin-top: $pure-profile-editor-texts-empty-state-top-margin;
          }
        }
      }

      &-3 {
        @include typo3-breakpoint("max-width") {
          .empty-state {
            margin-top: 0;
          }
        }
      }

      &-2 {
        @include typo3-breakpoint("max-width") {
          .empty-state {
            margin-top: $pure-profile-editor-texts-empty-state-top-margin;
          }
        }
      }

    }
  }

  .empty-state {
    border: $width-border dashed color("border");
  }
}