@use "lib/viewport";

:root {
  --d-post-control-background--hover: var(--d-hover);
}

.post-stream {
  .contents {
    font-size: var(--font-up-1);
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
  }
}

.timeline-container .topic-timeline {
  .timeline-scrollarea {
    border-left: 1px solid var(--accent-color);

    .timeline-scroller {
      @include viewport.from(lg) {
        margin-left: -4.5px;
        height: 40px !important; // height is coming from element style have no other choice
      }

      .timeline-replies,
      .timeline-ago {
        line-height: 1;
      }
    }

    .timeline-handle {
      background-color: var(--accent-color);
      outline: 3px solid var(--d-content-background);

      @include viewport.from(lg) {
        width: 8px;
        border-radius: 10px;
        height: calc(100% - 6px);
      }
    }
  }
}

// should probably get rid of this extra specificity class in core?
.timeline-container.timeline-fullscreen {
  @include viewport.until(lg) {
    .topic-timeline
      .timeline-scrollarea
      .timeline-scroller
      .timeline-scroller-content {
      padding-right: 0.5em;
    }
  }
}

body:not(.d-toc-installed) {
  .container.posts {
    grid-template-columns: auto 8em;

    @media screen and (width <= 924px) {
      grid-template-columns: auto;
    }
  }

  .topic-navigation-popup {
    min-width: 250px;
    right: 0;
  }
}

.container.posts {
  .post-notice {
    padding: var(--space-2);
    border-radius: var(--d-border-radius);
    font-size: var(--font-down-1-rem);

    .d-icon {
      font-size: var(--font-up-1);
      width: 1em;
    }
  }
}

.topic-post-badges {
  .badge-notification {
    font-size: var(--font-down-1);
    padding: 0.15em 0.35em;
    border-radius: 1em;
    min-width: 1.3em;
    box-sizing: border-box;
    color: var(--secondary);
  }
}

.timeline-container .topic-timeline .timeline-scroller-content {
  overflow: unset;
}

.more-topics__container
  .more-topics__list
  .topic-list-body
  .topic-list-item:last-of-type {
  border-bottom: 1px solid var(--primary-300);
}

.discourse-post-event .discourse-post-event-widget {
  background: var(--d-content-background);
}

.more-topics__container .nav {
  position: unset;
  margin-block: unset;
  margin-bottom: 1em;
}

nav.post-controls .actions button {
  font-size: var(--font-0);
}

.archetype-private_message {
  --pm-border-radius: var(--d-border-radius);
}

.header-title {
  .event-date {
    font-size: var(--font-down-3);
    border: 1px solid var(--tertiary-low);
    background: var(--tertiary-low);

    &.past {
      border-color: transparent;
      background-color: transparent;
    }
  }
}