/* Feed list */
#discrc-list {
  list-style:none;
  margin:0;
}

#discrc-list h2 {
  font-size:18px;
  border:0;
  margin:10px 0;
}

#discrc-list .drc-view {
  cursor:pointer;
}

#discrc-list .drc-new,
#discrc-list .drc-reply {
  display:inline-block;
  font-size:0;  /* TODO: Remove this declaration */
  height:12px;
  padding:2px;
  width:12px;
  vertical-align:text-bottom;
}
#discrc-list .drc-new {
  background:#dc0553;
}
#discrc-list .drc-reply {
  background:#0f54ea;
}
#discrc-list .drc-new > svg,
#discrc-list .drc-reply > svg {
  color:#fff;
  display:block;
}

#discrc:empty:before {
  animation: fade 2.5s infinite;
  content:'';
  background:#aaa;
  border-radius:3px;
  box-shadow:0 150px #aaa;
  display:block;
  height:32px;
  max-width:200px;
}
#discrc:empty:after {
  animation: fade 2s infinite;
  content:'';
  border-radius:3px;
  box-shadow:0 30px #aaa,
             0 60px #aaa,
             0 150px #aaa,
             0 180px #aaa;
  display:block;
  width:100%;
  height:20px;
  background:#aaa;
  margin-top:10px;
}

/* Modal popup */
#drc-view-post,
#drc-view-user {
  border:none;
  box-sizing:border-box;
  height: 100% !important;
  display:block;
  left: 0 !important;
  overflow-y:scroll;
  position:fixed;
}
#drc-view-post header {
  overflow: unset;
  position:sticky;
  top: 0;
  z-index:1;
}
#drc-view-post section {
  overflow: unset;
}
#drc-view-post footer {
  display:none;
}
html[dir="rtl"] #drc-view-post,
html[dir="rtl"] #drc-view-user {
  transform:translateX(100%);
}

/* Modal animation */
@keyframes slide {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide {
    100% { -webkit-transform: translateX(0%); }
}

@keyframes fade {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* UCP modal popup */
.oo-ui-windowManager #drc-view-post .oo-ui-window-frame {
  display:block;
  position: fixed;
  right: auto;
  height: 100% !important;
}
.oo-ui-windowManager #drc-view-post .drc-post-header {
  margin: 0 0 20px 0;
  top: 0;
  background: var(--themed-page-background);
}

/* Modal popup content */
.drc-post {
  border-bottom:1px solid #ccc;
}
.drc-view-post-content {
  position:relative;
}
.drc-post-header {
  box-shadow:0 2px 2px;
  margin:-20px -20px 20px;
  top: 45px;
  position:sticky;
  padding:20px;
  z-index:1;
}
.drc-post-header h2 {
  font-size:2em;
  font-weight:700;
  line-height:1.5em;
  margin-bottom:.5em;
  overflow-wrap:break-word;
}
.drc-post,
.drc-post-reply {
  display:grid;
  grid-template-columns:20px 40px minmax(0, 1fr);
  padding:10px 5px;
  position:relative;
  grid-gap:2px;
}
.drc-post-author {
  font-weight:bold;
}
.drc-post-author a {
  font-size:12px;
  font-weight:normal;
}
.drc-post-date {
  position:absolute;
  right:20px;
  top:10px;
}
.drc-post-date a {
  font-size:12px;
  color:#AAA;
}

.drc-post-avatar {
  display:inline-block;
  grid-column:1/3;
  grid-row:1/3;
  overflow:hidden;
  vertical-align:middle;
  margin-right:10px;
}
.drc-post-avatar img {
  border-radius:50%;
  width:40px;
}
.drc-post-content {
  grid-column:3/4;
  overflow-wrap:break-word;
  white-space:pre-wrap;
}