@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../button/button.scss" as *;

$ds-factbox__grade-size: 40px;
$ds-factbox__show-more-fade-height: 48px;
$ds-factbox__padding: ds-spacing($ds-s-100);
$ds-factbox__max-height: 500px; // includes top/bottom spacing

.ds-factbox {
  background-color: $ds-color-surface-primary;
  box-sizing: border-box;
  margin: 0;
  padding: ds-spacing($ds-s-100 0 $ds-s-200);

  .ds-factbox__inner {
    border: ds-border-width(xxs) solid $ds-color-border-primary;
    border-radius: ds-border-radius(050);
    max-height: ds-px-to-rem($ds-factbox__max-height);
    overflow: hidden;
    position: relative;
    padding: $ds-factbox__padding;

    @at-root .ds-force-px#{&} {
      max-height: $ds-factbox__max-height;
    }
  }

  &--expanded .ds-factbox__inner,
  &--expanded.ds-force-px .ds-factbox__inner {
    max-height: none;
  }

  .ds-factbox__title-image {
    margin: ds-spacing(0 0 $ds-s-100);
  }
  .ds-factbox__title-image,
  .ds-article-image {
    border-radius: ds-border-radius(012);
    overflow: hidden;
  }
  img {
    max-width: 100%;
  }
  .ds-factbox__body {
    overflow: hidden;
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-body-md, true);
    }
    p,
    .ds-article-image,
    .ds-icon--grade {
      margin: ds-spacing(0 0 $ds-s-075);
      padding: 0;
      &:last-child {
        margin-bottom: 0;
      }
    }
    a {
      @include ds-link($ds-link-article-body);
    }
    b,
    strong {
      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
    }
    @at-root .ds-force-px#{&} {
      b,
      strong {
        @include ds-typography($ds-typography-functional-body-md, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
      }
    }
  }
  .ds-factbox__title {
    margin: ds-spacing(0 0 $ds-s-075);
    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md) {
      color: $ds-color-text-primary;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-heading-xxs, $forcePx: true, $lineHeight: $ds-lineheight-md);
    }
  }
  .ds-factbox__title-highlight {
    color: $ds-theme-color;
    margin-right: ds-spacing($ds-s-025);
  }
  .ds-icon--grade {
    color: $ds-color-text-primary;
    display: block;
    height: ds-px-to-rem($ds-factbox__grade-size);
    svg {
      height: 100%;
      width: auto;
      circle {
        stroke: currentColor;
      }
    }
    @at-root .ds-force-px#{&} {
      height: $ds-factbox__grade-size;
    }
  }
  .ds-factbox__show-more--collapsable::before {
    content: "";
    background: $ds-gradient-content-fade-up;
    height: ds-px-to-rem($ds-factbox__show-more-fade-height);
    width: 100%;
    position: absolute;
    top: -#{ds-px-to-rem($ds-factbox__show-more-fade-height)};

    @at-root .ds-force-px#{&} {
      height: $ds-factbox__show-more-fade-height;
      top: -#{$ds-factbox__show-more-fade-height};
    }
  }
  .ds-factbox__show-more {
    display: none;
  }
  .ds-factbox__show-more--collapsable {
    background-color: $ds-color-surface-primary;
    display: block;
    button {
      margin: ds-spacing($ds-s-100 0 0);
    }
    &:not([data-factbox-expanded]) .ds-factbox__expand-more,
    &[data-factbox-expanded] .ds-factbox__expand-less {
      display: flex;
    }
    &:not([data-factbox-expanded]) .ds-factbox__expand-less,
    &[data-factbox-expanded] .ds-factbox__expand-more,
    &[data-factbox-expanded]::before {
      display: none;
    }
    &:not([data-factbox-expanded]) {
      position: absolute;
      bottom: $ds-factbox__padding;
      width: calc(100% - ($ds-factbox__padding * 2));

      &::after {
        content: "";
        height: $ds-factbox__padding;
        width: 100%;
        background-color: $ds-color-surface-primary;
        position: absolute;
      }
    }
  }
}
