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

$ds-factbox__grade-size: 40px;
$ds-factbox__padding: ds-spacing($ds-s-100);

.ds-factbox {
  background-color: none;
  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: none;
    overflow: hidden;
    position: relative;
    padding: $ds-factbox__padding;
  }

  .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;
    }
  }
}