/* transmission styles */
.tx {
  padding-bottom: 1rem;
  margin-top: var(--margin);
  font-size: var(--size);
}

.tx .body {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

.body a {
  font-weight: 600;
}



/* transmission image styles */
.image-wrapper {
  position: relative;
  display: inline-block;
  float: left;
}

.image-wrapper[data-thumb] > img {
  cursor: pointer;
}

/* gifs and thumbnails should be rendered nearest-neighbor */
.image-wrapper:not([data-thumb]) > img, .image-wrapper.thumb > img {
  image-rendering: crisp-edges;
}

.image-wrapper .bg-img {
  position: absolute;
  z-index: -3;
}

.image-wrapper .fg-img {
  position: relative;
  opacity: 0.5;
}


/* transmission header styles */
.header {
  font-weight: 700;
  width: 100%;
  display: flex;
  align-items: baseline;
}

.tx:not(.active) .header {
  color: var(--accent);
}

.reply {
  white-space: pre-wrap;
}

.handle {
  color: var(--fl);
  position: relative;
  font-size: .75em;
}

.tx:not(:hover) .clickable {
  display: none;
}

.clickable {
  color: var(--fl);
  cursor: pointer;
}

.clickable:hover {
  color: var(--fg);
}

.header .time {
  margin-left: auto;
  color: var(--fl);
  font-size: .75em;
  position: relative;
  z-index: -2;
}


/* transmission footer styles */
.tx > .footer {
  font-size: .75em;
  clear: left
}


/* command styles */
.tx .body:has(a[href="/p/big"]) {
  font-size: 2em;
}

.tx .body:has(a[href="/p/small"]) {
  font-size: 0.5em;
}

:is(a[href="/p/big"], a[href="/p/small"]) {
  color: var(--gsecondary);
}

:is(a[href="/p/big"], a[href="/p/small"]):hover {
  opacity: 0.5;
}

.tx.dark {
  --bg: var(--gfg)
}

.tx ::selection {
  background: var(--accent);
}

.tx:not(.active) ::selection {
  color: var(--bg)
}

.tx.active.light ::selection {
  background: var(--gbg);
  color: var(--accent);
}

.tx.active.dark ::selection {
  background: var(--gfg);
  color: var(--accent);
}