.bluesky-container {
  display: flex;
  flex-direction: column;

  background: white;
  color: #0b0f14;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;

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

  padding: 16px 16px;

  letter-spacing: 0.25px;

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

.dark-mode > .bluesky-container {
  background: #161e27;
  color: white;
}

.bluesky-container .bluesky-header {
  display: flex;

  margin-bottom: 8px;
}

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

  width: 42px;
  height: 42px;

  border-radius: 9999px;

  object-fit: cover;
}

.bluesky-container .bluesky-header .bluesky-user-info {
  flex: 1 1 0%;

  min-width: 0;

  margin-left: 10px;

  white-space: nowrap;
}

.bluesky-container .bluesky-header .bluesky-user-name {
  font-size: 17px;
  font-weight: bold;
  line-height: 20px;

  overflow: hidden;
  text-overflow: ellipsis;
}

.bluesky-container .bluesky-header .bluesky-user-handle {
  color: #42576c;

  font-size: 15px;

  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-mode > .bluesky-container .bluesky-header .bluesky-user-handle {
  color: #aebbc9;
}


.bluesky-container .bluesky-content-container {
  margin-bottom: 6px;
}

.bluesky-container .bluesky-content {
  font-size: 20px;
  line-height: 26px;

  padding-bottom: 10px;

  white-space: pre-wrap;
  word-wrap: break-word;
}

.bluesky-container a {
  color: #1083fe;
}

.dark-mode > .bluesky-container a {
  color: #208bfe;
}


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

  padding-top: 8px;
  padding-bottom: 8px;
}

.bluesky-container .bluesky-media-container:last-child {
  padding-bottom: 0;
}

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

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

  max-width: 100%;

  border-radius: 4px;

  aspect-ratio: 1 / 1;
  object-fit: cover;
}

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

  border-radius: 8px;

  aspect-ratio: auto;
}

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

/* 1st of 3 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(1):nth-last-child(3) {
  grid-row: span 2;
  grid-column: span 4;
}

/* 2nd of 3 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(2):nth-last-child(2),
/* 3rd of 3 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(3):nth-last-child(1) {
  grid-column: span 2;
}

/* 1st of 4 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(1):nth-last-child(4),
/* 2nd of 4 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(2):nth-last-child(3),
/* 3rd of 4 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(3):nth-last-child(2),
/* 4th of 4 children */
.bluesky-container .bluesky-media-container .bluesky-media:nth-child(4):nth-last-child(1) {
  grid-column: span 3;
}

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


.bluesky-container .bluesky-quote-container {
  margin-top: 8px;
  padding: 12px;

  border: 1px solid #c5cfd9;
  border-radius: 8px;
}

.dark-mode > .bluesky-container .bluesky-quote-container {
  border-color: #364b61;
}

.bluesky-container .bluesky-quote-header .avatar {
  display: block;

  width: 16px;
  height: 16px;

  border-radius: 9999px;

  object-fit: cover;
}

.bluesky-container .bluesky-quote-header {
  display: flex;
  align-items: center;
  gap: 4px;

  color: #42576c;

  padding-bottom: 2px;
}

.dark-mode > .bluesky-container .bluesky-quote-header {
  color: #aebbc9;
}

.bluesky-container .bluesky-quote-container .bluesky-user-name {
  flex: 0 1 auto;

  color: #0b0f14;

  font-size: 16px;
  line-height: 19px;
  font-weight: bold;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark-mode > .bluesky-container .bluesky-quote-container .bluesky-user-name {
  color: white;
}

.bluesky-container .bluesky-quote-container .bluesky-user-handle {
  color: #42576c;

  font-size: 15px;
  line-height: 18px;
  font-weight: normal;
}

.dark-mode > .bluesky-container .bluesky-quote-container .bluesky-user-handle {
  color: #aebbc9;
}

.bluesky-container .bluesky-quote-content {
  font-size: 16px;
  line-height: 21px;

  white-space: pre-wrap;
  word-wrap: break-word;
}


.bluesky-container .bluesky-footer {
  color: #42576c;

  margin-top: 2px;
}

.dark-mode > .bluesky-container .bluesky-footer {
  color: #aebbc9;
}


/* TODO Handle Bluesky quotes / media */

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

.preview.faint-letters.dark-mode > .bluesky-container .pelican-letter.hidden {
  opacity: 0.075;
}