:root {
  --community-teaser-color: var(--color-midnight);
  --community-teaser-color--enabled: var(--color-midnight);
  --community-teaser-background-color: var(--color-orange-light);
  --community-teaser-background-color--enabled: var(--color-orange-light);
  --community-teaser-date-color: var(--color-grey-dark);
  --community-teaser-date-color--enabled: var(--color-grey-dark);
  --community-teaser-date-line-height: var(--line-height-body);
  --community-teaser-date-margin-block: 0.5rem;
  --community-teaser-date-size: 1.3rem;
  --community-teaser-headline-margin-block: 1.5rem;
  --community-teaser-icon-background-color: var(--color-orange);
  --community-teaser-icon-color: var(--color-midnight);
  --community-teaser-stats-color: var(--color-grey-dark);
  --community-teaser-stats-color--enabled: var(--color-grey-dark);
  --community-teaser-stats-column-gap: 2rem;
  --community-teaser-stats-line-height: var(--line-height-body);
  --community-teaser-stats-margin-block: 0.5rem;
  --community-teaser-stats-row-gap: 1rem;
  --community-teaser-stats-size: 1.3rem;
  --community-teaser-stats-icon-gap: 1rem;
  --community-teaser-text-line-height: var(--line-height-body);
  --community-teaser-text-margin-block: 1.5rem;
  --community-teaser-text-size: 1.6rem;
  --community-teaser-badge-offset-factor: 2.2;

  @include use-responsive-sizing(--community-teaser-badge-size, responsive-map(xs 5rem, xl 7.5rem));
  @include use-responsive-sizing(--community-teaser-padding, responsive-map(xs 2rem, xl 3rem));
}

.community-teaser {
  inline-size: 100%;
  padding-block-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  position: relative;

  &:focus-within {
    @include use-focus-outline();
  }
}

.community-teaser__badge {
  align-items: center;
  background-color: var(--community-teaser-icon-background-color);
  block-size: var(--community-teaser-badge-size);
  display: flex;
  inline-size: var(--community-teaser-badge-size);
  justify-content: center;
  margin-block-end: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor) - var(--community-teaser-badge-size));
  margin-block-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor) * -1);
  position: relative;
}

.community-teaser__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  overflow: hidden;
  position: relative;
}

.community-teaser__icon {
  color: var(--community-teaser-icon-color);
  font-size: calc(var(--community-teaser-badge-size) * 0.4);
}

.community-teaser__content {
  background-color: var(--community-teaser-background-color);
  block-size: 100%;
  color: var(--community-teaser-color);
  display: block;
  margin-inline-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  overflow-wrap: break-word;
  padding: var(--community-teaser-padding);
  padding-inline-start: calc(var(--community-teaser-padding) + var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  transition-property: background-color, color;

  &:any-link:is(:hover, :focus) {
    --community-teaser-stats-color: var(--community-teaser-stats-color--enabled);
    --community-teaser-date-color: var(--community-teaser-date-color--enabled);

    background-color: var(--community-teaser-background-color--enabled);
    color: var(--community-teaser-color--enabled);
  }

  &:focus {
    outline: 0;
  }

  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

.community-teaser__headline {
  --headline-kicker-spacing: 1rem;
  --headline-kicker-font-weight: var(--font-weight-regular);
  --focus-outline-width: 0;

  margin-block: var(--community-teaser-headline-margin-block);
}

.community-teaser__text {
  font-size: var(--community-teaser-text-site);
  hyphens: auto;
  line-height: var(--community-teaser-text-line-height);
  margin-block: var(--community-teaser-text-margin-block);
  word-break: break-word;
}

.community-teaser__date {
  color: var(--community-teaser-date-color);
  display: block;
  font-size: var(--community-teaser-date-size);
  line-height: var(--community-teaser-date-line-height);
  margin-block: var(--community-teaser-date-margin-block);
  transition-property: color;
}

.community-teaser__stats {
  color: var(--community-teaser-stats-color);
  column-gap: var(--community-teaser-stats-column-gap);
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--community-teaser-stats-margin-block);
  row-gap: var(--community-teaser-stats-row-gap);
  transition-property: color;
}

.community-teaser__stat {
  align-items: center;
  display: flex;
  gap: var(--community-teaser-stats-icon-gap);
}

.community-teaser__stat-value {
  font-size: var(--community-teaser-stats-size);
  line-height: var(--community-teaser-stats-line-height);
}

.community-teaser__stat-label {
  font-size: calc(var(--community-teaser-stats-size) * 1.5);
}