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

$ds-game-header__icon-size: 105px;

.ds-game-header {
  width: 100%;

  .ds-game-header__top {
    background-color: $ds-color-surface-primary;
    color: $ds-color-neutral-black;
  }

  .ds-game-header__top-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: ds-spacing($ds-s-100);
  }

  .ds-game-header__top-content,
  .ds-game-header__description-content {
    max-width: var(--ds-game-header-content-width, 100%);
    margin: 0 auto;
  }

  .ds-game-header__title {
    margin: 0;
    @include ds-typography($ds-typography-functional-heading-lg) {
      color: inherit;
    }
  }

  .ds-game-header__media {
    margin-right: ds-spacing($ds-s-100);
    width: $ds-game-header__icon-size;

    > .picture {
      background: none;
    }
  }

  .ds-game-header__description {
    background-color: $ds-color-surface-primary;
  }

  .ds-game-header__description-content {
    padding: ds-spacing($ds-s-100);
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }

    @include ds-mq-only-breakpoint(mobile) {
      padding-top: ds-spacing($ds-s-050);
    }

    a {
      @include ds-link($ds-link-paragraph);
    }

    b,
    strong {
      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
    }

    p {
      margin: ds-spacing($ds-s-100 0);
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}