@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/byline-list/byline-list.scss";
@use "../../components/byline-list-item/byline-list-item.scss";
@use "../../components/modal/modal.scss";

$ds-list-item__portrait-size: 44px;
$ds-list-item__portrait-size--small: 36px;
$ds-list-item__portrait-size--large: 104px;

.ds-byline {
  padding: 0 0 ds-spacing($ds-s-100) 0;
  border-bottom: ds-border-width(xxs) solid $ds-color-border-primary;
  overflow: hidden;
  max-width: 520px;
  margin-top: ds-spacing($ds-s-100);

  .ds-byline__inner {
    display: flex;
  }

  .ds-byline__portrait {
    border-radius: 50%;
    background-color: $ds-color-surface-primary-raised-soft;
    height: 100%;

    .picture,
    img {
      border-radius: 50%;
      width: $ds-list-item__portrait-size;
    }

    &:not(:first-of-type) {
      position: relative;

      :before {
        box-sizing: border-box;
        position: absolute;
        content: "";
        border: ds-spacing($ds-s-025) solid $ds-color-border-primaryinvert-strongest;
        border-radius: 100%;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        top: -4px;
        left: -4px;
      }
    }
  }

  &--no-border {
    border-bottom: none;
    padding-bottom: 0;
  }

  &--show-images .ds-byline__info {
    margin-left: ds-spacing($ds-s-075);
  }

  .ds-byline__info {
    align-self: flex-end;

    &.ds-byline__info--no-title {
      align-self: center;
    }

    .ds-byline__role,
    .ds-byline__name,
    .ds-byline__and {
      color: $ds-color-text-primary;
    }

    .ds-byline__role {
      display: block;
      @include ds-typography($ds-typography-functional-heading-xxs, $fontWeight: $ds-fontweight-regular);
    }

    .ds-byline__name,
    .ds-byline__and {
      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
    }

    .ds-byline__name {
      text-decoration-line: underline;
      &:hover {
        text-decoration-line: none;
      }
    }
  }

  .ds-byline__inner--multiple {
    flex-wrap: wrap;

    .ds-byline__info {
      margin-left: 0;
      width: 100%;
    }
  }

  &.ds-byline--show-images {
    .ds-byline__inner--multiple {
      .ds-byline__info {
        margin-top: ds-spacing($ds-s-075);
      }
    }
  }

  &--large {
    position: relative;
    display: flex;
    padding-top: ds-spacing($ds-s-200);

    .ds-byline__portrait--large {
      position: absolute;
      right: ds-spacing($ds-s-100);
      top: 0;
      background-color: transparent;
      border-radius: 0;
      width: $ds-list-item__portrait-size--large;
    }

    .ds-byline__info {
      margin-left: 0;
    }
  }
}

.ds-byline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}