@use "../../../feature/theme/theme";
@import "../../icons/icons";

.card-topics {
  .topic-icon {
    position:        relative;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    flex-shrink:     0;

    @extend .i-35;
  }

  .topic-subject {
    font-size: .9rem;

    // highlight search results
    em {
      background-color: $unread-bg;
      font-style:       normal;
      font-weight:      bold;
    }

    .topic-unread {
      font-weight: bold;
    }
  }

  .topic-container {
    width:     100%;
    min-width: 0; // @see https://medium.com/@gaurav5430/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6
  }

  .topic-pagination {
    font-size:    $font-size-sm;
    white-space:  nowrap;
    margin-left:  .5rem;
    margin-right: .25rem;
  }

  .topic-list-item {
    &.tagged {
      background-color: $unread-bg;
    }

    // must be here. otherwise, background-color would be overwritten by :nth-children()
    &.flagged {
      background-color:    $alert-danger-background;
      color:               $alert-danger-color;
      border-bottom-color: $alert-danger-border;

      a {
        color: inherit;
      }
    }
  }

  @include media-breakpoint-up(sm) {
    .topic-row {
      display:   flex;
      flex-wrap: nowrap;
    }
  }

  @include media-breakpoint-down(md) {
    .not-read {
      @include not-read-border();
    }
  }

  .tag-clouds {
    margin-bottom: 4px;
  }

  @include media-breakpoint-up(lg) {
    .tag-clouds {
      margin-left:   auto;
      margin-top:    -4px; // same height on every row whether tag exists
      margin-bottom: 0; // remove margin bottom on large screen
    }
  }
}

.card-post.post-deleted-collapsed {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px);

  .post-delete {
    border: none;
  }
}

a.not-read {
  &:hover:before {
    @include content-icon($icon-category-topic-mark-as-read);
    position:         absolute;
    display:          flex;
    cursor:           pointer;
    border-radius:    .375rem;
    width:            100%;
    height:           100%;
    top:              0;
    left:             0;
    background-color: #000;
    opacity:          0.5;
    justify-content:  center;
    align-items:      center;
    color:            #fff;
    font-size:        1rem;
    z-index:          100;
  }

  &:after {
    content:  ' ';
    position: absolute;
    bottom:   2px;
    right:    0;

    @include not-read-bullet;
  }
}

@include media-breakpoint-up(sm) {
  .topic-list-item {
    padding: .5rem 1rem;

    > .row {
      align-items: center;
    }
  }
}
