// Default overrides from Feature Highlight
.wallpaper-feature-highlight {
  .icon.icon-dismiss {
    // change background property to use transparent background
    background: transparent url('chrome://global/skin/icons/close.svg');
    background-size: var(--size-item-small);
    height: var(--size-item-small);
    width: var(--size-item-small);
    position: absolute;
    margin: 0;
    inset-block-start: calc(var(--space-large) + var(--space-xxsmall));
    inset-inline-end: calc(var(--space-large) + var(--space-xxsmall));

    @media (prefers-color-scheme: dark) {
      // override color so that it is visible on white image background
      --dark-icon-color: var(--color-gray-70);

      color: var(--dark-icon-color);
    }

    &:hover {
      --dark-icon-hover: var(--color-gray-60);

      color: var(--dark-icon-hover);
    }
  }

  .feature-highlight .feature-highlight-modal {
    --arrow-size: 24px;

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

    .content-wrapper {
      margin-block: 0;
    }

    .message-icon {
      display: none;
    }

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

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

    &.inset-inline-start {
      // Bug 1967304 - Large number (48px)
      inset-inline-end: calc(var(--space-xlarge) * 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: 0;

      &::after {
        inset-block-end: var(--arrow-size);
      }
    }

    .title {
      font-weight: var(--font-weight-bold);
      margin-block: var(--space-xsmall);
    }

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

    .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;
    }
  }
}
