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

$ds-list-item__icon-size: 24px;
$ds-list-item__portrait-size: 44px;
$ds-list-item__portrait-size--small: 36px;

.ds-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-list-item--border::after {
    content: "";
    width: 100%;
    height: ds-border-width(xxs);
    background: $ds-color-border-primary;
    position: absolute;
    bottom: 0;
  }

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

  label.ds-list-item__content,
  button.ds-list-item__content,
  a.ds-list-item__content {
    cursor: pointer;
    @include ds-hover(true) {
      opacity: 0.6;
    }

    &:active {
      opacity: 0.6;
    }
  }

  a.ds-list-item__content {
    text-decoration: none; /* full-element links are covered by the opacity hover effect - adding underlines makes it too busy */
  }

  .ds-icon {
    position: relative;
    display: flex;
    height: ds-px-to-rem($ds-list-item__icon-size);
    width: ds-px-to-rem($ds-list-item__icon-size);
    margin: 0;
    @at-root .ds-force-px#{&} {
      height: $ds-list-item__icon-size;
      width: $ds-list-item__icon-size;
    }
    svg {
      fill: currentColor;
    }
  }

  .ds-list-item__icon-left,
  .ds-list-item__icon-right {
    color: $ds-color-text-primary;
  }

  .ds-list-item__titles {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    overflow-wrap: anywhere;

    .ds-list-item__title {
      text-align: left;
      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-md) {
        color: $ds-color-text-primary;
      }
      @at-root .ds-force-px#{&} {
        @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-md, $forcePx: true) {
          color: $ds-color-text-primary;
        }
      }

      &.ds-list-item__title--semibold {
        @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
          );
        }
      }

      &.ds-list-item__title--bold {
        @include ds-typography(
          $ds-typography-functional-body-md,
          $lineHeight: $ds-lineheight-md,
          $fontWeight: $ds-fontweight-bold
        );

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

    a.ds-list-item__title {
      @include ds-link($ds-link-list);
    }

    .ds-list-item__subtitle {
      text-align: left;
      @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-list-item__meta {
    text-align: right;
    @include ds-typography($ds-typography-functional-body-sm) {
      color: $ds-color-text-primary-subtle;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-body-sm, true) {
        color: $ds-color-text-primary-subtle;
      }
    }
  }

  .ds-list-item__icon-left {
    display: inline-flex;
  }

  .ds-list-item__icon-right {
    display: inline-flex;
  }

  .ds-list-item__image {
    .picture,
    img {
      height: ds-px-to-rem($ds-list-item__icon-size);
    }

    @at-root .ds-force-px#{&} {
      .picture,
      img {
        height: $ds-list-item__icon-size;
        width: $ds-list-item__icon-size;
      }
    }

    figure {
      margin: 0;
    }
  }

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

    .picture,
    img {
      width: $ds-list-item__portrait-size;
    }
  }

  &:active:not(.ds-list-item--disabled) .ds-list-item__inner::before {
    background-color: $ds-color-surface-primary-raised-soft;
  }

  &:focus-visible {
    outline: none;
    .ds-list-item__inner {
      outline: ds-border-width(xs) solid $ds-color-border-primary;
      outline-offset: -2px;
    }
  }

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

.ds-list-item--accordion {
  .ds-icon--expand_less {
    display: none;
  }

  @at-root .ds-list-item__accordion-inner {
    display: none;
    padding: ds-spacing(0 $ds-s-050);
    border-top: ds-border-width(xxs) solid $ds-color-border-primary;
    ul {
      margin: 0;
      padding: 0;
    }
  }

  &.ds-list-item--accordion-active {
    .ds-icon--expand_less {
      display: flex;
    }
    .ds-icon--expand_more {
      display: none;
    }

    & + .ds-list-item__accordion-inner {
      display: block;
    }
  }
}

.ds-list-item--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ds-list-item--accordion .ds-checkbox__accordion,
.ds-list-item--radio .ds-radio-btn__inner,
.ds-list-item--checkbox .ds-checkbox__inner {
  &::before {
    display: none;
  }
}

.ds-list-item--radio,
.ds-list-item--checkbox {
  .ds-list-item__icon-left .ds-checkbox__inner,
  .ds-list-item__icon-left .ds-radio-btn__inner {
    padding: 0;
  }
}

.ds-list-item--toggle {
  a {
    display: block;
    width: 100%;
    @include ds-link($ds-link-list);
  }
}

.ds-list-item--byline {
  .ds-list-item__subtitle {
    text-transform: capitalize;
  }

  &.ds-byline-list-item--direkt {
    padding: ds-spacing($ds-s-075 0);

    .ds-list-item__portrait {
      .picture,
      img {
        width: $ds-list-item__portrait-size--small;
      }
    }
  }
}