// Default overrides from Feature Highlight
.wallpaper-feature-highlight {
  .feature-highlight .feature-highlight-modal {
    --arrow-size: 24px;

    width: auto;
    padding: var(--space-large);

    .message-icon {
      display: none;
    }

    &.inset-inline-end {
      inset-inline-start: 0;

      &::after {
        inset-inline-start: 0;
      }
    }

    &.inset-inline-start {
      // Bug 1967304 - Large number (64px)
      inset-inline-end: calc(var(--space-xxlarge) * 2);

      &::after {
        inset-inline-end: calc(calc(var(--arrow-size) / 2) * -1);
      }
    }

    &.inset-block-end {
      margin-block-start: 0;

      &::after {
        inset-block-start: 0;
      }
    }

    &.inset-block-start {
      inset-block-end: 0;
      margin-block-end: calc(-4 * var(--space-xsmall)); // -20px; sit lower on the page

      &::after {
        // just a nudge (2px) lower than the arrow size to point directly at the Customize icon
        inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall));
      }
    }

    .title {
      // @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
      font-weight: var(--font-weight-heading, var(--heading-font-weight));
      margin-block: var(--space-medium);
    }

    .subtitle {
      margin-block: 0 var(--space-medium);
    }

    .button-wrapper {
      display: block;
      text-align: end;
    }

    // Message Arrow Pointer
    &::after {
      height: var(--arrow-size);
      width: var(--arrow-size);
      box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 15%);
      pointer-events: none;
    }

    // The "Dismiss" button in the top right corner of the highlight needs to be in front of the image
    > moz-button {
      position: absolute;
      inset-inline-end: var(--space-large);
      inset-block-start: var(--space-large);
    }
  }

  // Custom override for dismiss-contrast
  &.is-inverted-dark-dismiss-button {
    .feature-highlight-modal {
      @media (prefers-color-scheme: dark) {

        // override color so that it is visible on the image
        > moz-button {
          --button-icon-fill: var(--color-gray-70);
        }
      }
    }
  }
}