@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/mask/mask.scss" as *;

.ds-teaser-image {
  position: relative;
  width: 100%;
  margin: 0;

  .ds-teaser-image__byline {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: ds-spacing(0 $ds-s-025);
    margin-left: ds-spacing($ds-s-050);
    background-color: $ds-color-surface-overlay;
    z-index: 5;
    @include ds-typography($ds-typography-functional-meta-sm, $lineHeight: $ds-lineheight-lg) {
      color: $ds-color-neutral-white;
    }
  }

  &--mask {
    .ds-teaser-image__byline {
      background-color: transparent;
      color: $ds-color-text-primary-subtle;
      position: relative;
      width: 100%;
      text-align: right;
      margin: ds-spacing($ds-s-025 0 0);
      padding: 0;
    }
  }

  .ds-teaser--large &--mask {
    padding: ds-spacing($ds-s-100 $ds-s-100 0);
    box-sizing: border-box;
  }
}