@import './variants/FootballBounce';
@import './variants/SpinBallSmall';

.logo-and-wordmark-wrapper {
  // Override default h1 margins
  margin-block: 0;

  .nova-enabled .content & {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

}

.logo-and-wordmark {
  $logo-size: 64px;
  $wordmark-size: 105px;

  // @nova-cleanup(remove-conditional): Make default behavior, remove .nova-enabled selector
  .nova-enabled & {
    justify-content: flex-start;

    .wordmark {
      display: none;
    }

    @include at-outer-grid-cols(8) {
      width: max-content;

      .wordmark {
        display: inline-block;
      }
    }
  }

  .nova-enabled .content & {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  align-items: center;
  display: flex;
  justify-content: center;
  // Bug 1967304 - Large number (48px)
  margin-block-end: var(--space-xxlarge);

  // Edge case for users who have pocket stories turned off
  .no-recommended-stories & {
    // Bug 1967304 - Large number (40px)
    margin-block-end: calc(var(--space-large) + var(--space-xlarge));
  }

  .logo {
    display: inline-block;
    height: $logo-size;
    width: $logo-size;
    background: image-set(url('chrome://branding/content/about-logo.png'), url('chrome://branding/content/about-logo@2x.png') 2x) no-repeat center;
    background-size: $logo-size;
  }

  .wordmark {
    background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center;
    background-size: $wordmark-size;
    -moz-context-properties: fill;
    display: inline-block;
    fill: var(--newtab-wordmark-color);
    height: $logo-size;
    margin-inline-start: var(--space-large);
    width: $wordmark-size;

    // Contrast fix for users who have wallpapers set
    @include wallpaper-contrast-fix;
  }

  // @backward-compat { version 153 }
  // The .logo-variation-small + variants blocks below can be removed after
  // Firefox 153 hits Release (2026 World Cup logo variation sunset).
  .logo-variation-small {
    cursor: pointer;
    display: inline-block;
    height: $logo-size;
    width: $logo-size;

    // Hover-dim is a motion effect: skip it for reduced-motion users so
    // the logo behaves like a static element for them. The `.is-animating`
    // class is set by the variation component while its animation is
    // playing and pins opacity back to 1 so an in-flight animation reads
    // at full brightness even if the cursor is still over the slot.
    @media (prefers-reduced-motion: no-preference) {
      transition: opacity 0.15s ease-out;

      &:hover {
        opacity: 0.8;
      }

      &.is-animating,
      &.is-animating:hover {
        opacity: 1;
      }
    }
  }

  // @nova-cleanup(remove-conditional): Delete this entire .classic-enabled block and its contents
  .classic-enabled & {
    @media (max-width: $break-point-medium - 1) {
      $logo-size-small: 64px;
      $wordmark-small-size: 100px;

      .logo {
        background-size: $logo-size-small;
        height: $logo-size-small;
        width: $logo-size-small;
      }

      .wordmark {
        background-size: $wordmark-small-size;
        height: $logo-size-small;
        width: $wordmark-small-size;
        margin-inline-start: var(--space-medium);
      }
    }
  }
}