.truncator {
  $component-name: ".truncator";
  $component-name-not-selector: "truncator";
  $truncator-max-lines: 7;
  $truncator-box-padding: -1;
  $truncator-fade-lines: 2.5;


  @mixin untruncate {
    #{$component-name}__expand {
      display: none;

      & + #{$component-name}__content {
        max-height: none;
        overflow-y: visible;
      }
    }
  }

  max-width: $line-width-max;
  display: flex;
  flex-direction: column;
  margin-bottom: spacing($typography-margin-p);

  --line-height: #{line-height("multiple")};
  --max-lines: #{$truncator-max-lines};

  &__header {
    order: 1;
  }

  //if the header is not in a boxed truncator we're subtracting the margin of a p-tag from it's top margin, to make things fit vertically with other typography
  &:not(#{$component-name}--box) {
    h2.#{$component-name-not-selector}__header {
      margin-top: spacing($typography-margin-top-h2, $subtract: spacing($typography-margin-p));
    }

    h3.#{$component-name-not-selector}__header {
      margin-top: spacing($typography-margin-top-h3, $subtract: spacing($typography-margin-p));
    }

    h4.#{$component-name-not-selector}__header {
      margin-top: spacing($typography-margin-top-h4, $subtract: spacing($typography-margin-p));
    }
  }

  //if the truncator is the first-child in a content-container we skip the top margin of in the header
  .page__content__block &,
  .row__item & {
    &:first-child {
      #{$component-name}__header {
        margin-top: 0;
      }
    }
  }


  &__content {
    order: 2;
    @include content-container;
    position: relative;
    max-height: calc(var(--line-height) * var(--max-lines)); //by default the height is restricted to 7 lines, but when JS see that the element has vertical overflow it furthermore restricts the height to 5 lines
    overflow-y: scroll; //in case JS will fail we're setting overflow to scroll to not render content inaccessible
  }

  &__expand {
    order: 3; //button comes before content in markup for accessibility reasons, so we're swithing the order
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    position: relative;
    display: block;
    width: 100%;
    color: color("foreground-theme");
    text-align: left;
    outline: none;

    &[hidden] {
      display: none
    }

    &:not([hidden]) {
      & + #{$component-name}__content {
        //when the button is visible height is further restricted from 7 to 5 lines. This way we avoid having the button only reveal one or two words. It will be at least two lines.
        max-height: calc(var(--line-height) * (var(--max-lines) - 2));
        overflow-y: hidden; //when JS has made the button visible we're setting overflow to hidden, to not allow scrolling
      }
    }

    &::before {
      content: '';
      position: absolute;
      font-size: font-size(0);
      bottom: calc(#{line-height("single", $include-calc: false, $fontsize-relative: ("current": 0, "target": -1))} - 1px); //we're subtracting one pixel to avoid a subpixel renderingissue in safari on retina display where a 1 device pixel line of the text would be fully visible
      left: 0;
      right: 0;
      height: line-height("multiple", $times: $truncator-fade-lines);
      background-image: linear-gradient(to top, color("background") calc((#{line-height("multiple", $include-calc: false)} - 1em) / 2), var(--transparent-background) calc(#{line-height("multiple", $times: $truncator-fade-lines, $include-calc: false)} - ((#{line-height("multiple", $include-calc: false)} - 1em) / 2)));
      z-index: $z-index-above-content;
    }

    &__visual-button {
      position: relative;
      z-index: $z-index-above-content + 1;  
      padding: spacing($button-padding-vertical) spacing($button-padding-horizontal) spacing($button-padding-vertical) 0px;

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

    &:hover {   
      #{$component-name}__expand__visual-button {
        color: color("foreground-theme-hover");
        cursor: pointer;
      }
    }

    &:active {
      #{$component-name}__expand__visual-button {
        color: color("foreground-theme");
      } 
    }

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

  &--box {
    padding: spacing($truncator-box-padding);
    position: relative;
    margin-top: spacing($typography-margin-p);

    &:not(.theme--dark) {
      @include set-colors("background-secondary", $rewrite-css-vars: true);
    }

    &--border {
      border-top: $width-border-utility solid color("border-theme");
    }

    #{$component-name}__header {
      margin-top: 0;
    }

    #{$component-name}__expand {
      font-size: font-size(0);
      display: flex;
      justify-content: center;
      margin-bottom: spacing($button-padding-vertical-small, $times: -1, $add: line-height("single", $times: -0.5, $include-calc: false), $subtract: spacing($truncator-box-padding));

      //background: red;

      &::before {
        top: line-height("multiple", $times: $truncator-fade-lines * -1);
      }

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

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

      .button {
        z-index: $z-index-above-content + 1;
        @include set-icon("expand", $include-pseudo: "before");
        //margin-bottom: spacing($button-padding-vertical-small, $times: -2, $subtract: line-height("single", $include-calc: false));
      }
    }
  }

  &--unconstrained {
    $max-width: none;
  }

  &--no-truncation {
    @include untruncate;
  }

  &--not-on-medium {
    @include breakpoint("medium") {
      @include untruncate;
    }
  }

  &--not-on-wide {
    @include breakpoint("wide") {
      @include untruncate;
    }
  }

  &--profile-image-list {
    --line-height: calc(#{line-height("single", $include-calc: false)} + #{line-height("single", $include-calc: false, $fontsize-relative: ("current": 0, "target": -1))} + #{$width-border-slim * 2});
  }
}