@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../button-toggle/button-toggle.scss";
@use "../../components/teaser-image/teaser-image.scss";

.ds-tag-header {
  width: 100%;
  background-color: $ds-color-surface-primary;
  padding-bottom: ds-spacing($ds-s-100);
  display: flex;

  &.ds-tag-header--has-border {
    .ds-tag-header__bar {
      border-bottom: ds-border-width(xxs) solid $ds-color-border-primary;
      padding-bottom: ds-spacing($ds-s-100);

      + .ds-tag-header__article-count {
        padding-top: ds-spacing($ds-s-100);
      }
    }
  }

  @include ds-mq-only-breakpoint(mobile) {
    flex-direction: column;
  }

  .ds-tag-header__content {
    width: 100%;
  }

  .ds-tag-header__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column-reverse;
    margin: ds-spacing(0 $ds-s-100 0);

    @include ds-mq-smallest-breakpoint(tablet) {
      flex-direction: row;
    }

    .ds-btn--toggle {
      flex-shrink: 0;
      margin: ds-spacing($ds-s-100 0 0);
    }
  }

  .ds-tag-header__heading {
    margin: 0;
    margin-top: ds-spacing($ds-s-100);
  }

  .ds-tag-header__vignette {
    margin-bottom: ds-spacing($ds-s-025);
    display: block;
    text-decoration: none;
    @include ds-typography($ds-typography-functional-label-sm) {
      color: $ds-theme-color;
    }
    &:hover {
      text-decoration: none;
    }
  }

  .ds-tag-header__title {
    word-break: break-word;
    margin: 0;
    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-bold) {
      color: $ds-color-text-primary;
    }
  }

  .ds-tag-header__media {
    @include ds-mq-only-breakpoint(mobile) {
      flex-shrink: 0;
      width: calc(100% + #{ds-spacing($ds-s-100)} * 2);
      margin: 0 -#{ds-spacing($ds-s-100)};
    }
    @include ds-mq-smallest-breakpoint(tablet) {
      flex-shrink: 0;
      width: 196px;
      max-width: 40%;
      margin: ds-spacing($ds-s-100 0 0 $ds-s-100);
    }
  }

  .ds-tag-header__article-count {
    margin: ds-spacing(0 $ds-s-100 0);
    padding-top: ds-spacing($ds-s-050);
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary-subtle;
    }
  }

  .ds-tag-header__description {
    margin: ds-spacing(0 $ds-s-100 0);
    padding-top: ds-spacing($ds-s-100);
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }

    a {
      @include ds-link($ds-link-article-body);
    }

    b,
    strong {
      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
    }

    p {
      margin: ds-spacing($ds-s-100 0);
    }

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

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