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

$profile-header-img-width: 120px;

.ds-profile-header {
  width: 100%;
  background-color: $ds-color-surface-primary;
  display: flex;

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

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

  &.ds-profile-header--has-image .ds-profile-header__bar {
    min-height: 102px;
  }

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

  .ds-profile-header__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    margin: ds-spacing($ds-s-100 $ds-s-100 0);
    position: relative;
    padding-right: $profile-header-img-width;

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

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

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

  .ds-profile-header__subtitle {
    margin: 0;
    > a {
      word-break: break-word;
      @include ds-typography($ds-typography-functional-body-md) {
        color: $ds-color-text-primary-subtle;
      }
    }
  }

  .ds-profile-header__media {
    display: flex;
    position: absolute;
    width: $profile-header-img-width;
    height: 100%;
    overflow: hidden;
    right: 0;
    bottom: 0;

    .picture {
      position: relative;
      margin-top: auto;
      width: 100%;
    }
  }

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