@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/teaser/teaser.scss";
@use "../../components/group-header/group-header";

.ds-teaser-package {
  position: relative;
  background-color: $ds-color-surface-primary;

  & > .ds-teaser {
    position: relative;
  }

  > .ds-teaser::after,
  > .ds-split-container::after {
    content: "";
    height: ds-border-width(xxs);
    background-color: $ds-color-border-primary;
    position: absolute;
    display: block;
    clear: both; // Clears floating media in standard-teaser
    top: 0;
    left: 0;
    right: 0;
    margin: ds-spacing(0 $ds-s-100);
    box-sizing: border-box;
    z-index: 5;
  }

  // first-child only triggers if there is no vignette
  .ds-teaser--hide-top-border::after,
  > .ds-split-container:first-child::after,
  > .ds-teaser:first-child::after {
    display: none;
  }

  &::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 4px;
    top: 0;
    background-color: $ds-theme-color;
    z-index: 5;
  }

  &:has(> .ds-teaser:only-child)::after {
    display: none;
  }

  &.ds-teaser-package--bauta {
    background-color: $ds-color-surface-breaking;

    & .ds-teaser,
    & .ds-teaser--slideshow {
      background-color: $ds-color-surface-breaking;
    }

    .ds-split-container {
      background-color: $ds-color-surface-breaking;
      &::after {
        background-color: $ds-color-border-primary;
      }
    }

    & > .ds-teaser::after {
      background-color: $ds-color-border-primary;
    }
  }
}