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

$ds-byline-list__icon-size: 24px;
$ds-byline-list__portrait-size: 44px;

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

  .ds-byline-list__item {
    background-color: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    list-style: none;
    line-height: 0;
    position: relative;

    &.ds-byline-list__item--border::after {
      content: "";
      width: 100%;
      height: ds-border-width(xxs);
      background: $ds-color-border-primary;
      position: absolute;
      bottom: 0;
    }

    .ds-byline-list__item__content {
      box-sizing: border-box;
      border-radius: 0;
      margin: 0;
      display: flex;
      gap: ds-spacing($ds-s-100);
      align-items: center;
      justify-content: space-between;
      padding: ds-spacing($ds-s-100 0);
      width: 100%;
      border: none;
      background: none;
    }

    a.ds-byline-list__item__content {
      cursor: pointer;
      color: $ds-color-text-primary;
      text-decoration: none;
      /* full-element links are covered by the opacity hover effect - adding underlines makes it too busy */

      @include ds-hover(true) {
        opacity: 0.6;
      }

      &:active {
        opacity: 0.6;
      }

      @include ds-focus(
        $offset: -2px,
        $includeSelector: true,
        $width: ds-border-width(xs),
        $color: $ds-color-border-primary-strongest
      );
    }

    .ds-byline-list__item__icon-right {
      color: $ds-color-text-primary;
      display: inline-flex;

      .ds-icon {
        position: relative;
        display: flex;
        height: ds-px-to-rem($ds-byline-list__icon-size);
        width: ds-px-to-rem($ds-byline-list__icon-size);
        margin: 0;

        @at-root .ds-force-px#{&} {
          height: $ds-byline-list__icon-size;
          width: $ds-byline-list__icon-size;
        }

        svg {
          fill: currentColor;
        }
      }
    }

    .ds-byline-list__item__titles {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      align-items: flex-start;
      overflow-wrap: anywhere;
      color: $ds-color-text-primary;

      .ds-byline-list__item__title {
        text-align: left;

        @include ds-typography(
          $ds-typography-functional-body-md,
          $lineHeight: $ds-lineheight-md,
          $fontWeight: $ds-fontweight-semibold
        );

        @at-root .ds-force-px#{&} {
          @include ds-typography(
            $ds-typography-functional-body-md,
            $lineHeight: $ds-lineheight-md,
            $forcePx: true,
            $fontWeight: $ds-fontweight-semibold
          );
        }
      }

      a.ds-byline-list__item__title {
        @include ds-link($ds-link-list);
        @include ds-focus(
          $offset: 2px,
          $includeSelector: true,
          $width: ds-border-width(xs),
          $color: $ds-color-border-primary-strongest
        );
      }
    }

    .ds-byline-list__item__role {
      text-align: left;
      text-transform: capitalize;
      @include ds-typography($ds-typography-functional-body-md) {
        color: $ds-color-text-primary-subtle;
      }
      @at-root .ds-force-px#{&} {
        @include ds-typography($ds-typography-functional-body-md, true) {
          color: $ds-color-text-primary-subtle;
        }
      }
    }

    .ds-byline-list__item__portrait {
      border-radius: 50%;
      overflow: hidden;
      background-color: $ds-color-surface-primary-raised-soft;
      flex-shrink: 0;

      .picture,
      img {
        width: $ds-byline-list__portrait-size;
      }
    }

    &:active .ds-byline-list__item::before {
      background-color: $ds-color-surface-primary-raised-soft;
    }

    @at-root a#{&} {
      box-sizing: border-box;
      text-align: center;
      text-decoration: none;
    }
  }
}
