/*
# Custom Beeper.app style
This file will be injected as a <style> tag
After making your changes, type "Reload custom CSS" in the command bar
To open dev tools, open the command bar and type "open console"
*/

:root {
  /*
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  */
}

@media (prefers-color-scheme: dark) {
  :root {}
}

/*
  Random CSS Hacks Notes

  'Pinned / Favourites' Avatars
    $$('#root .left .threads-list-container .threads .virtual-list .participant-wrapper .participant-avatar .participant-img')

  Command Bar
    Command + J
      $$('.command-bar-modal .command-bar')
    Command + K / Command + F
      $$('.command-bar-modal .command-bar.command-bar-general-search')

  .command-bar.command-bar-general-search {
    width: 80%; // Override the width?
  }

  .command-bar, .forward-message-preview {
    width: 60vw;      // Override the width?
    max-width: 700px; // Override the max-width?
  }
*/

/**********************************************/
/* Inbox - Favourites - Support Unread Filter */
/**********************************************/

.left .threads-list-container .threads:has(.AccountFilters button[data-text="Unread"][class*="AccountFilters-module__selected"]) .pinned-threads .sidebar-thread:not(.isUnread) {
  display: none;
}

/**********************/
/* Inbox - Favourites */
/**********************/

.left .threads-list-container .threads .virtual-list > div > div:first-child {
  /* Ensure the favourites section is limited in height and scrollable */
  overflow-y: auto;
  max-height: 30vh;

  /* There also seems to be a tiny bit of spacing that makes it scroll on the X axis.. so just hide that.. */
  overflow-x: hidden;

  /* Overrides to fit 1 extra column in since the avatars are smaller */
  .pinned-threads:not(.compact) {
    &.cols-2 {
      grid-template-columns: repeat(3, minmax(60px, 1fr));
    }

    &.cols-3 {
      grid-template-columns: repeat(4, minmax(60px, 1fr));
    }

    &.cols-4 {
      grid-template-columns: repeat(5, minmax(60px, 1fr));
    }

    &.cols-5 {
      grid-template-columns: repeat(6, minmax(60px, 1fr));
    }

    &.cols-6 {
      grid-template-columns: repeat(7, minmax(60px, 1fr));
    }
  }

  .pinned-threads .sidebar-thread {
    &.isPinned > .PinnedThreadListItem-module__wrapper {
      /* Set the avatar size */
      --avatar-size: 30px;

      padding: 5px;

      /* Override a hardcoded size in GroupAvatar to use the --avatar-size properly */
      .participant-avatar > .GroupAvatar-module__wrapper {
        width: var(--avatar-size) !important;
        height: var(--avatar-size) !important;
      }
    }
  }
}