.toot-container {
  background: white;
  color: black;

  font-family: Roboto, sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-feature-settings: "kern";

  max-width: min(100%, 600px);

  padding: 16px;

  --resize-handle-width: 16px;
}

.dark-mode > .toot-container {
  background: #313543;
  color: white;
}


.toot-container .toot-header {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 15px;
  line-height: 22px;

  margin-bottom: 16px;

  overflow: hidden;
}

.toot-container .toot-header .avatar {
  display: block;

  width: 46px;
  height: 46px;

  border-radius: 4px;

  object-fit: cover;
}

.toot-container .toot-header .toot-user-info {
  flex: 1 1 100%;

  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
}

.toot-container .toot-header .toot-user-name {
  color: black;

  font-weight: 500;

  text-overflow: ellipsis;
  overflow: hidden;
}

.dark-mode > .toot-container .toot-header .toot-user-name {
  color: white;
}

.toot-container .toot-header .toot-user-handle {
  color: #282c37;

  text-overflow: ellipsis;
  overflow: hidden;
}

.dark-mode > .toot-container .toot-header .toot-user-handle {
  color: #9baec8;
}


.toot-container .toot-content {
  font-size: 19px;
  line-height: 24px;

  word-wrap: break-word;
}

.toot-container .toot-content p {
  margin: 0;
  margin-bottom: 20px;

  white-space: pre-wrap;
  unicode-bidi: plaintext;
}

.toot-container .toot-content p:last-child {
  margin-bottom: 0;
}

.toot-container .toot-content a {
  color: #5e64f8;

  text-decoration: none;
  unicode-bidi: isolate;
}

.dark-mode > .toot-container .toot-content a {
  color: #8c8dff;
}

.toot-container .toot-content a.u-url.mention,
.toot-container .toot-content a.mention.hashtag {
  color: #5e64f8;
}

.dark-mode > .toot-container .toot-content a.u-url.mention,
.dark-mode > .toot-container .toot-content a.mention.hashtag {
  color: #d9e1e8;
}


.toot-container .toot-media-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-gap: 4px;

  margin-top: 16px;

  aspect-ratio: 16/9;
}

.hide-media > .toot-container .toot-media-container {
  display: none;
}

.toot-container .toot-media-container .toot-media {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 4px;

  object-fit: cover;
}

/* HACK[id=media-collage] The positions and dimensions of the images within the
grid are controlled with a few hardcoded CSS rules, because I don't know how
else to replicate these without some even more complicated JavaScript. */

/* 1st of 1 child */
.toot-container .toot-media-container .toot-media:nth-child(1):nth-last-child(1) {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

/* 1st of 2 children */
.toot-container .toot-media-container .toot-media:nth-child(1):nth-last-child(2),
/* 1st of 3 children */
.toot-container .toot-media-container .toot-media:nth-child(1):nth-last-child(3) {
  grid-row: 1 / 3;
}

/* 2nd of 2 children */
.toot-container .toot-media-container .toot-media:nth-child(2):nth-last-child(1) {
  grid-row: 1 / 3;
}

/* the 5th (or more) child */
.toot-container .toot-media-container .toot-media:nth-child(n + 5) {
  display: none;
}


.toot-container .toot-footer {
  color: #444b5d;

  font-size: 14px;
  line-height: 18px;

  margin-top: 16px;
}

.dark-mode > .toot-container .toot-footer {
  color: #606984;
}


/* Button for showing/hiding spoilered content */
.toot-container .toot-spoiler-button {
  display: inline-block;

  background: #d9e1e8;
  color: black;

  font-size: 11px;
  font-weight: bold;
  line-height: 24px;

  margin: -1px 0 0;
  padding: 0 6px;

  border: none;
  border-radius: 2px;

  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
}

.dark-mode > .toot-container .toot-spoiler-button {
  background: #606984;
  color: #282c37;
}

/* Whichever spoiler button text is not meant to be showing */
:not(.hide-spoiler) > .toot-container .toot-content .toot-spoiler-container .show-more-text,
.hide-spoiler > .toot-container .toot-content .toot-spoiler-container .show-less-text {
  display: none;
}

/* Everything but the spoiler, if the content is to be hidden */
.hide-spoiler > .toot-container .toot-content > .toot-spoiler-container ~ :not(.toot-spoiler-container) {
  display: none;
}


.toot-container img.emoji {
	width: 16px;
	height: 16px;

  margin: -0.2ex 0.15em 0.2ex;

  vertical-align: middle;
  object-fit: contain;
}

.toot-container .toot-content img.emoji {
  width: 24px;
  height: 24px;

  margin: -1px 0 0;
}

.toot-container i[class^="fa"] {
  font-size: 14px;
  vertical-align: baseline;
}

/* "Faint" hidden letters in post */
.preview.faint-letters > .toot-container .pelican-letter.hidden {
	opacity: 0.1;
  color: black;
}

.preview.faint-letters.dark-mode > .toot-container .pelican-letter.hidden {
	opacity: 0.1;
  color: white;
}

/* "Faint" hidden letters in spoiler button */
.preview.faint-letters > .toot-container .toot-spoiler-button .pelican-letter.hidden {
	opacity: 0.2;
  color: black;
}