.feedArticlePopup {
  @include media-breakpoint-down(md) {
    left: auto !important;
    right: 0;
    transform: none !important;
  }

  padding: 0 !important;
  text-align: left;
  overflow: hidden;
  margin-top: -14px;

  .actionList {
    & > li {
      margin-bottom: 0 !important;
    }

    .action {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      font-size: inherit;
      font-weight: 500;
      gap: 0.8rem;
      padding: 8px 16px;
      text-align: left;
      width: 100%;
      white-space: nowrap;

      &.soon {
        color: var(--black-300);
        display: flex;
        gap: 0.6rem;
        width: 100%;
        justify-content: space-between;

        .icon {
          opacity: 0.4;
        }
      }

      &:hover {
        background: var(--black-500);
        color: var(--black-50) !important;

        .icon {
          filter: invert(1);
          opacity: 1 !important;
        }
      }

      .icon {
        flex: 0 2.4rem;
        min-width: 2.4rem;
      }

      .title {
        flex: 1;
      }
    }

    li:first-child .action {
      padding-top: 16px;
    }

    li:last-child .action {
      padding-bottom: 16px;
    }
  }
}
