// Default overrides from Feature Highlight
.shortcut-feature-highlight {
  .feature-highlight-modal {
    padding: var(--space-large);
    width: auto;

    p {
      margin: 0;
      padding-block-start: 0;
    }

    // Make sure the text is legible with dark wallpaper + light mode combo
    p, p:hover {
      color: inherit;
    }

    .message-icon {
      display: none;
    }

    &.inset-block-end {
      margin-block-start: var(--space-large);
      inset-inline-end: var(--space-xlarge);
    }

    // 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);
        }
      }
    }
  }

  .shortcut-feature-highlight-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
  }

  .shortcut-feature-highlight-copy {
    font-size: var(--font-size-small);

    .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-end: var(--space-xsmall);
      text-align: inherit;
    }
  }
}