_channel-list.scss

:root {
  // -- Guild header popout --
  #guild-header-popout {
    .item_d90b3d {
      flex-direction: row-reverse;

      .iconContainer_d90b3d {
        margin: 0 8px 0 0;
      }
    }

    // Server profile icon fix
    .icon_ad5fac {
      width: 100%;
      height: 100%;
    }

    // Boost
    &-premium-subscribe {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #ff73fa1c;
      }
      .icon_d90b3d {
        color: #ff73fa;
      }
    }

    // Invite
    &-invite-people {
      color: #677bc4;

      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #677bc41e;
      }
      .icon_d90b3d {
        color: #677bc4;
      }
    }

    // Settings
    &-settings {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #546e7a1e;
      }
      .icon_d90b3d {
        color: #546e7a;
      }
    }

    // Insights
    &-insights {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #1abc9c23;
      }
      .icon_d90b3d {
        color: #1abc9c;
      }
    }

    // Create channel
    &-create-channel {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #e91e6221;
      }
      .icon_d90b3d {
        color: #e91e63;
      }
    }

    // Create category
    &-create-category {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #eaa14e13;
      }
      .icon_d90b3d {
        color: #eaa14e;
      }
    }

    // Create event
    &-create-event {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #ede9e611;
      }
      .icon_d90b3d {
        & > path:first-child {
          fill: #677bc4;
        }
        & > path:last-child {
          fill: #ede9e6;
        }
      }
    }

    // Active threads
    &-active-threads {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #5488f731;
      }
      .icon_d90b3d {
        color: #5488f7;
      }
    }

    // Application directory
    &-application-directory {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #30495713;
      }
      .icon_d90b3d {
        color: #304957;
      }
    }

    // Notifications
    &-notifications {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #e9bb4815;
      }
      .icon_d90b3d {
        color: #fcd462;
      }
    }

    // Privacy
    &-privacy {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #4a83d418;
      }
      .icon_d90b3d {
        color: #4a84d4;
      }
    }

    // Nickname
    &-change-nickname {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #43b58218;
      }
      .icon_d90b3d {
        color: #43b581;
      }
    }

    // Hide muted channels
    &-hide-muted-channels {
      &:hover,
      &:active:not(.hideInteraction_d90b3d),
      &.focused_d90b3d {
        background-color: #5c6eb117;
      }
      &:hover svg > path {
        &:first-child {
          color: var(--control-brand-foreground);
        }
        &:last-child {
          color: #fff;
        }
      }
    }
  }

  // Categories arrows
  .mainContent_a08117 .arrow_d64d50 {
    display: none;
  }

  // Thread channels
  .spine_e1e976 {
    z-index: 1;
  }

  // -- Notification --
  .container_fd6364 {
    background: var(--background-secondary);
    z-index: 3;
  }

  .unreadTop__6e8c4 {
    top: -9px;
    z-index: 2;
    width: 100%;
    padding: 0;

    .unreadBar_c43953 {
      &.mention_edf32f {
        border-radius: 0;
        background: linear-gradient(var(--mention-color), #0000);
      }

      &.unread_edf32f {
        border-radius: 0;
        background: linear-gradient(var(--unread-color), #0000);
      }
    }
  }

  .unreadBottom__6be9f {
    width: 100%;
    height: 15px;
    padding: 0;

    .unreadBar_c43953 {
      &.mention_edf32f {
        border-radius: 0;
        background: linear-gradient(#0000, var(--mention-color));
      }

      &.unread_edf32f {
        border-radius: 0;
        background: linear-gradient(#0000, var(--unread-color));
      }
    }
  }

  .unreadBar_c43953 > .text_edf32f {
    display: none;
  }

  // Mention pill
  .mentionsBadge_e2a798 .numberBadge__40d6f {
    background-color: var(--mention-color) !important;

    &::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      background-color: inherit;
      border-radius: 100%;
      z-index: -1;
      animation: var(--disable-animations), 2s pulse infinite;
      will-change: transform;
    }
  }

  // Unread pill
  .unread_d8bfb3 {
    top: 50%;
    left: 5px;
    width: 6px;
    height: 6px;
    z-index: 1;
    background-color: var(--unread-color);
    border-radius: 10px;
    margin-top: 0;
    transform: translate(0%, -50%);

    &::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      background-color: inherit;
      border-radius: 100%;
      z-index: 1;
      animation: var(--disable-animations), pulse 2s infinite;
      will-change: transform;
    }
  }

  // Game activity / call area
  .activityPanel_a4d4d9,
  .container_adcaac {
    border-bottom: none;
  }

  // Channel call
  .voiceUserSummary_c43953 svg:not(.icon_d03bba) {
    padding-right: 10px;
  }
  [mask="url(#svg-mask-voice-user-summary-item)"] {
    mask: none;
  }

  .tile_dc5fc4 {
    background-color: var(--background-secondary-alt);

    .button_e5cc00,
    .buttonColor_d4af21 {
      background-color: var(--brand-experiment);
    }
  }

  // SCTR connection
  .container__13b2a {
    .header-2C89wJ {
      background-color: var(--background-tertiary);
    }
    section {
      background-color: var(--background-secondary);
    }
  }

  // Channel settings
  .group_d25d19 {
    width: 110px;
    border: none;
    gap: 5px;

    .item_d25d19 {
      border-radius: 8px;

      &:hover,
      &.selected_d25d19 {
        &.deny_d25d19 {
          color: #ed4245;
          background-color: #ed42452f;
        }
        &.passthrough_d25d19 {
          color: #dcddde;
          background-color: #6464643a;
        }
        &.allow_d25d19 {
          color: #43b581;
          background-color: #43b5823b;
        }
      }
    }
  }

  // Invite popout
  .inviteRow_cedfaf {
    border-radius: 0;
    padding-left: 15px;

    &:hover {
      background-color: var(--background-modifier-hover);
    }
  }

  // Adding roles
  .autocompleteShadow-1aXK3x {
    box-shadow: 0 4px 15px #00000031;

    & + .autocompleteArrow-2CRgr2,
    & ~ .header-PfVfAO {
      background: var(--background-secondary-alt);
    }
    & ~ .sectionTag-euh3ZW {
      background: var(--background-secondary);

      .row-3UUG_l {
        padding: 0;
      }
    }
    & ~ .header-PfVfAO .headerText-3k--Lk {
      margin-left: 15px;
    }
  }

  // Boost
  .innerWrapper_aecbd6 {
    border-radius: 5px;
  }
}