/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Attachment               ║ Base                                                                                    ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */

:root {
  --count: 10;
}

.container-2sjPya {
  display: grid;
  grid-template-columns: repeat(var(--count), max-content);
  grid-gap: 24px;
  overflow-x: auto;
  padding: 12px 0px;
  margin-top: 12px;
  margin-bottom: 4px;
}

.reactions-1BUEKl {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
}

.container-3Sqbyb {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
}

[aria-label*="rules"] .embedWrapper-1MtIDg {
  grid-column: 1 / -1;
  position: sticky;
  left: 0;
}

/* Image Radius */
.messageAttachment-CZp8Iv .imageWrapper-oMkQl4 {
  border-radius: var(--radius-tertiary);
}

/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Attachment               ║ Scrollbar                                                                               ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */

/* Scrollbar */
.container-2sjPya::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.container-2sjPya::-webkit-scrollbar-thumb {
  background-color: var(--background-tertiary);
  min-height: 40px;
}

.container-2sjPya::-webkit-scrollbar-thumb,
.container-2sjPya::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

.container-2sjPya::-webkit-scrollbar-thumb,
.container-2sjPya::-webkit-scrollbar-track {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

.container-2sjPya::-webkit-scrollbar-track {
  background-color: var(--background-primary);
}
