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

    p {
      margin: 0;
    }

    .message-icon {
      display: none;
    }

    .icon-dismiss {
      margin-block-start: 0;
      margin-inline-end: 0;
    }

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

  .feature-highlight-modal.arrow-inline-start {
    inset-block-start: calc(100% + var(--space-large));
    inset-inline-start: 50%;
    transform: translateX(-50%);

    &::after {
      inset-block-start: calc(var(--space-small) * -1);
      inset-inline-end: 50%;
      transform: translateX(50%) rotate(135deg);
    }


    @media (min-width: $break-point-layout-variant) {
      min-width: auto;
      inset-inline-start: auto;
      inset-inline-end: calc(100% + var(--space-large));
      inset-block-start: 50%;
      transform: translateY(-50%);

      &::after {
        inset-block-start: 50%;
        inset-inline-end: calc(var(--space-small) * -1);
        transform: translateY(-50%) rotate(225deg);
      }

    }
  }

  .inset-block-center {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .follow-section-button-highlight-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
  }

  .follow-section-button-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);
    }
  }
}