Teaser: Tile Gray Darker

.teaser {
  $root: &;

  position: relative;
  height: 100%;

  &__visual {
    position: relative;
    overflow: hidden;
  }

  &__wrapper {
    @include breakpoint(large) {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      max-width: rem-calc($container-max-width);
      height: 100%;
      transform: translate(-50%, -50%);
    }
  }

  &__image {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); /* To prevent transition flickering */
    backface-visibility: hidden;
  }

  &__content {
    &:not(:first-child) {
      padding-top: 1.6 * $base-padding;
    }
  }

  &__details {
    display: none;
  }

  &__extra {
    display: none;
  }

  &__date {
    @include typography-level('teaser-date');

    display: block;

    &.-event::before {
      @include icon-content-extended(map-get($icons, 'calendar'), inline-block);

      margin-right: $base-margin;
      vertical-align: bottom;
      font-size: $teaser-date-icon-font-size;
    }
  }

  &__headline,
  &__text,
  &__signet {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__headline {
    margin-bottom: 0.8 * $base-margin;

    #{$root}__signet {
      display: none;
    }
  }

  &__text {
    margin-bottom: 0;
  }

  &__cta:not(:first-child) {
    margin-top: 1.6 * $base-margin;
  }

  &__link {
    @include typography-level('button');
  }

  &__signet {
    position: absolute;
    top: 2.4 * $base-margin;
    right: 2.4 * $base-margin;
    bottom: auto;
    left: 2.4 * $base-margin;
    display: block;
    text-align: right;

    span {
      @include typography-level('heading-2');
      display: inline-block;
      padding: 1.2 * $base-margin 2 * $base-margin 1.2 * $base-margin;
      background-color: $secondary;
      color: $white;
    }
  }

  &--simple {
    @include breakpoint(medium) {
      #{$root}__visual:last-child {
        height: 100%;
      }

      #{$root}__content {
        padding-right: 0.8 * $base-padding;
      }
    }
  }

  &--horizontal {
    padding: $base-padding 0;
    border-bottom: 1px solid $gray-lighter;

    @include breakpoint(small) {
      #{$root}__visual {
        display: none;
      }

      #{$root}__visual,
      #{$root}__details {
        flex: 0 0 auto;
      }

      #{$root}__content {
        padding: 0;
      }

      #{$root}__details {
        display: block;
        margin-top: 0.8 * $base-margin;
      }
    }

    @include breakpoint(medium) {
      display: flex;
      flex-flow: row nowrap;

      #{$root}__visual {
        display: block;
        width: percentage(3 / 12);
      }

      #{$root}__content {
        flex: 1 1 auto;
        padding: 0 2.4 * $base-padding;
      }

      #{$root}__details {
        width: percentage(4 / 12);
        margin-top: 0;
      }
    }

    @include breakpoint(large) {
      #{$root}__visual {
        width: percentage(2 / 12);
      }

      #{$root}__content {
        padding: 0 3.2 * $base-padding;
      }

      #{$root}__details {
        width: percentage(3 / 12);
      }

      &.-narrow {
        #{$root}__visual {
          width: #{percentage(4 / 12)};
        }
      }
    }

    #{$root}__signet {
      display: none;
    }

    #{$root}__headline #{$root}__signet {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      display: inline-block;
      float: right;
      margin-left: 1.2 * $base-margin;
    }
  }

  &--simple,
  &--highlight,
  &--overlay {
    #{$root}__image {
      height: 100%;
    }
  }

  &--highlight,
  &--overlay {
    #{$root}__headline {
      margin-bottom: 0.8 * $base-margin;
    }
  }

  &--highlight {
    #{$root}__content {
      position: relative;
      max-width: 41.6rem;
      margin: -5.6rem 1.2rem 0;
      padding: 2.4 * $base-padding 2.4 * $base-padding;
      background-color: $white;
    }

    // stylelint-disable-next-line order/order
    @include breakpoint($highlight-breakpoint) {
      #{$root}__visual {
        height: 100%;
      }

      #{$root}__content {
        position: absolute;
        bottom: 3.2 * $base-margin;
        left: 3.2 * $base-margin;
        width: calc(100% - 6.4rem);
        margin: 0;
      }
    }
  }

  &--overlay {
    @include breakpoint($overlay-breakpoint) {
      #{$root}__signet {
        top: auto;
        bottom: 2.4 * $base-margin;
      }

      #{$root}__visual {
        height: 100%;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          display: block;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0, $transparent 18rem) no-repeat;
        }
      }

      #{$root}__content {
        position: absolute;
        top: 2.4 * $base-margin;
        right: 2.4 * $base-margin;
        left: 2.4 * $base-margin;
        padding-top: 0;
      }

      &.-dark {
        #{$root}__visual {
          background: $black;

          &::after {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0, $transparent 18rem) no-repeat;
          }
        }
      }

      &.-bottom {
        #{$root}__visual {
          &::after {
            background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0, $transparent 18rem) no-repeat;
          }
        }

        #{$root}__content {
          top: auto;
          bottom: 2.4 * $base-margin;
        }

        #{$root}__signet {
          top: 2.4 * $base-margin;
          bottom: auto;
        }

        &.-dark {
          #{$root}__visual {
            &::after {
              background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0, $transparent 18rem) no-repeat;
            }
          }
        }
      }

      #{$root}__visual {
        background: $white;
      }

      #{$root}__image {
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
      }
    }
  }

  &--tile {
    #{$root}__content {
      padding: 1.6 * $base-padding;
    }
  }

  &.-box {
    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: $gutter / 2;
      }
    }
    border: 1px solid $light;

    &.-active,
    &:hover {
      border-color: $secondary;
    }
  }
}

.link__teaser {
  $root: '.teaser';

  display: block;
  height: 100%;

  .teaser__headline,
  .teaser__text {
    color: var(--link-teaser-color, #{$black});
  }

  .teaser__date {
    color: var(--link-teaser-date-color, #{$gray-darker});
  }

  .teaser {
    pointer-events: none;

    &--highlight {
      @include breakpoint(large) {
        #{$root}__content {
          padding: 2.4 * $base-padding 2.4 * $base-padding;
        }

        #{$root}__headline {
          margin-bottom: 0.8rem;
        }

        #{$root}__text,
        #{$root}__cta {
          display: block;
        }
      }
    }
  }

  &:hover,
  &:focus {
    text-decoration: none;

    .link {
      text-decoration: underline;
    }

    .teaser {
      &__link {
        text-decoration: underline;
      }

      &__btn {
        background-position-x: 0;
        transition: background-position 0.2s linear;

        &::before {
          width: 4.4rem;
          border-width: 0.2rem;
          transition: width 0.2s linear, border-right-width 0s linear 0.2s;
        }

        &::after {
          background-position-x: 50%;
          transition: background-position 0.2s linear;
        }

        &.-cta {
          color: var(--btn-cta-hover-color, #{$white});

          &::after {
            background-position-x: 96%;
            color: var(--btn-cta-hover-icon, #{$white});
          }
        }
      }
    }
  }

  &:active {
    #{$root}__btn {
      color: var(--btn-active-color, #{$black});

      &::before {
        border-color: var(--btn-active-border, #{$black});
      }

      &::after {
        background-position-x: 0;
        color: var(--btn-active-icon, #{$white});
      }

      &.-cta {
        color: var(--btn-cta-active-color, #{$white});

        &::after {
          background-position-x: 0;
          color: var(--btn-cta-active-icon, #{$white});
        }
      }
    }
  }

  .teaser {
    &--highlight {
      @include breakpoint($highlight-breakpoint) {
        #{$root}__content {
          padding: 0;
          background-color: $transparent;
          background-image: linear-gradient(to right, $white 50%, $transparent 50%);
          background-position-x: 96%;
          background-size: 220% 100%;
        }

        #{$root}__headline {
          margin-bottom: 0;
        }

        #{$root}__text,
        #{$root}__cta {
          display: none;
        }

        #{$root}__btn-wrapper {
          position: relative;
          display: inline-block;

          &::before {
            content: '';
            position: absolute;
            z-index: 20;
            width: 100%;
            height: 4.4rem;
            background-image: linear-gradient(
              to right,
              $transparent percentage(1/3),
              $primary percentage(1/3),
              $primary percentage(2/3),
              $white percentage(2/3)
            );
            background-position-x: 98%;
            background-size: 330% 100%;
          }
        }

        #{$root}__btn::before {
          content: '';
          position: absolute;
          z-index: 10;
          width: 100%;
        }
      }
    }
  }

  @at-root {
    .-mobile & {
      @include breakpoint($highlight-breakpoint) {
        &:not(.-active) {
          .teaser--highlight.-light #{$root}__headline {
            color: $white;
          }
        }
      }

      &.-active {
        .teaser {
          &--highlight {
            @include breakpoint($highlight-breakpoint) {
              #{$root}__content {
                padding: 2.4 * $base-padding 2.4 * $base-padding;
                background-position-x: 0;
                transition: background-position 0.2s linear 0.1s;
              }

              #{$root}__headline {
                margin-bottom: 0.8rem;
                animation: teaser-highlight-blink 0.4s linear;
              }

              #{$root}__text,
              #{$root}__cta {
                display: block;
                animation: teaser-highlight-blink 0.4s linear;
              }

              #{$root}__btn-wrapper::before {
                background-position-x: 0;
                animation: teaser-highlight-slide 0.8s linear;
              }

              #{$root}__btn::before {
                left: calc(100% - 4.4rem);
                width: 4.4rem;
              }

              #{$root}__btn::after {
                top: 1px;
                right: 1px;
                bottom: 1px;
                height: auto;
              }
            }
          }
        }
      }
    }

    .-desktop & {
      @include breakpoint($highlight-breakpoint) {
        &:not(:hover):not(:focus):not(:active) {
          .teaser--highlight.-light #{$root}__headline {
            color: $white;
          }
        }
      }

      &:hover,
      &:focus {
        .teaser {
          &--highlight {
            @include breakpoint($highlight-breakpoint) {
              #{$root}__content {
                padding: 2.4 * $base-padding 2.4 * $base-padding;
                background-position-x: 0;
                transition: background-position 0.2s linear 0.1s;
              }

              #{$root}__headline {
                margin-bottom: 0.8rem;
                animation: teaser-highlight-blink 0.4s linear;
              }

              #{$root}__text,
              #{$root}__cta {
                display: block;
                animation: teaser-highlight-blink 0.4s linear;
              }

              #{$root}__btn-wrapper::before {
                background-position-x: 0;
                animation: teaser-highlight-slide 0.8s linear;
              }

              #{$root}__btn::before {
                left: calc(100% - 4.4rem);
                width: 4.4rem;
              }
            }
          }

          &--overlay {
            @include breakpoint($overlay-breakpoint) {
              #{$root}__image {
                opacity: 0.6;
                transform: scale(1.02);
              }
            }
          }
        }
      }
    }
  }
}

@keyframes teaser-highlight-blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
@keyframes teaser-highlight-slide {
  0% {
    background-position-x: 98%;
  }

  50% {
    background-position-x: 98%;
  }

  75% {
    background-position-x: 50%;
  }

  100% {
    background-position-x: 0%;
  }
}