@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/teaser/teaser.scss" as *;

.ds-teaser.ds-teaser--centered {
  display: flex;
  flex-direction: column;
  position: relative;

  .ds-teaser__media {
    video {
      max-width: 100%;
    }
  }

  .ds-teaser__content {
    display: flex;
    flex-direction: row;
    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
    text-align: center;

    .ds-teaser__content-inner {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
  }

  &:focus-visible {
    outline: none !important; /* stylelint-disable-line declaration-no-important */

    .ds-teaser__content {
      @include ds-teaser-focus(-8px, false);
    }
  }

  .ds-teaser__vignette {
    margin-top: ds-spacing($ds-s-025);
  }

  .ds-teaser__title {
    @include ds-typography($ds-typography-detail-teaser-centrerad) {
      text-align: center;
    }
  }

  @include ds-hover(true) {
    .ds-teaser__title {
      @include ds-underline(3px);
    }
  }
}