.story-footer {
  color: var(--newtab-text-secondary-color);
  inset-inline-start: 0;
  margin-block-start: var(--space-medium);
  display: flex;
  gap: var(--space-large);
  position: relative;
  pointer-events: none;

  .story-sponsored-label span {
    display: inline-block;
  }

  .story-sponsored-label,
  .status-message {
    -webkit-line-clamp: 1;
    font-size: var(--font-size-small);
    color: var(--newtab-text-secondary-color);
  }

  .status-message {
    display: flex;
    align-items: center;
    height: 24px;

    .story-badge-icon {
      fill: var(--newtab-text-secondary-color);
      height: 16px;
      margin-inline-end: var(--space-small);

      &.icon-bookmark-removed {
        background-image: url('#{$image-path}icon-removed-bookmark.svg');
      }
    }

    .story-context-label {
      color: var(--newtab-text-secondary-color);
      flex-grow: 1;
      font-size: var(--font-size-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.story-animate-enter {
  opacity: 0;
}

.story-animate-enter-active {
  opacity: 1;
  transition: opacity 150ms ease-in 300ms;

  .story-badge-icon,
  .story-context-label {
    animation: color 3s ease-out 0.3s;

    @keyframes color {
      0% {
        color: var(--newtab-status-success);
        fill: var(--newtab-status-success);
      }

      100% {
        color: var(--newtab-text-secondary-color);
        fill: var(--newtab-text-secondary-color);
      }
    }
  }
}

.story-animate-exit {
  position: absolute;
  inset-block-start: 0;
  opacity: 1;
}

.story-animate-exit-active {
  opacity: 0;
  transition: opacity 250ms ease-in;
}