/**
 * @name         Collapsible Sidebars
 * @author       Kuro
 * @version      2.1.0
 * @description  Makes the Channel, Member, and Settings sidebars collapsible on hover.
 */

:root {
    --collapsed-channel-width: 101px; /* Must be > 100px */
    --expanded-channel-width: 200px;

    --collapsed-members-width: 64px;
    --expanded-members-width: 256px;

    --collapsed-settings-width: 80px;
    --expanded-settings-width: 272px;
}

/* Apply collapsible logic only below this value */
@media (max-width: 1280px) {

/*
  Channel List Sidebar
*/

  /*
    Collapsed State
  */

    /* Set the collapsed width of the channel list */
    [class*=sidebarList] {
        width: var(--collapsed-channel-width) !important;
    }

    /* Center voice channel icons when the sidebar is collapsed */
    [class*=sidebarList] [class*=container] > [class*=list] {
        padding-left: 32px !important;
    }

    /* Hide various text elements and buttons within the collapsed channel list */
    :is(
            [class*=spine], /* Thread indicator lines */
            [class*=linkTop] > [class*=children], /* Channel action buttons (e.g., invite, settings) */
            [class*=linkTop] > [class*=name], /* Channel names */
            [class*=linkBottom], /* Call status text */
            [class*=actionButtons]:not(:has(> [class*=jumpButton])), /* Call control buttons */
            [class*=voiceUser] > [class*=content] > [class*=container] /* Names of users in voice */
        ) {
        display: none !important;
    }

  /*
    Expanded State
  */

    /* On hover, expand the channel list to its full width */
    [class*=content] > [class*=sidebar]:hover [class*=sidebarList] {
        width: var(--expanded-channel-width) !important;
        z-index: 1 !important;
    }

    /* Adjust voice icon padding for the expanded view */
    [class*=content] > [class*=sidebar]:hover [class*=container] > [class*=list] {
        padding-left: 48px !important;
    }

    /* Reveal the previously hidden elements when the sidebar is hovered */
    [class*=content] > [class*=sidebar]:hover :is(
        [class*=spine],
        [class*=linkTop] > [class*=children],
        [class*=linkTop] > [class*=name],
        [class*=linkBottom],
        [class*=actionButtons]:not(:has(> [class*=jumpButton])),
        [class*=voiceUser] > [class*=content] > [class*=container]
        ) {
        display: flex !important;
    }

    /* Keep main chat portion centered */
    [class*=content] > [class*=sidebar]:hover + [class*=page] {
        --translate-distance: calc(var(--expanded-channel-width) - var(--collapsed-channel-width)) !important;
        margin-left: calc(-1 * var(--translate-distance)) !important;
        width: calc(100% + var(--translate-distance)) !important;
        z-index: 0 !important;        
        mask-image: linear-gradient(white, white), linear-gradient(black, black) !important;
        mask-composite: exclude !important;
        mask-size: auto, var(--translate-distance) 100% !important;
        mask-position: top left !important;
        mask-repeat: no-repeat !important;
    }

/*
  Member List Sidebar
*/

  /*
    Collapsed State
  */

    /* Set the collapsed width of the member list container */
    [class*=chat] > [class*=content] > [class*=container] {
        width: var(--collapsed-members-width) !important;
        min-width: var(--collapsed-members-width) !important;
    }

    /* Move nameplates to look nicer */
    [class*="nameplated"] [class*="container"] {
        left: -192px !important;
    }

    /* Hide textual components */
    [class*=memberInner] > [class*=content] {
        visibility: hidden !important;
    }

  /*
    Expanded State
  */

    /* On hover, expand the member list to its full width */
    [class*=chat] > [class*=content] > [class*=container]:hover {
        width: var(--expanded-members-width) !important;
        min-width: var(--expanded-members-width) !important;
        z-index: 1 !important;
    }

    /* On hover, reset users and nameplates */
    [class*=chat] > [class*=content] > [class*=container]:hover [class*="nameplated"] [class*="container"] {
        left: 0px !important;
    }

    /* On hover, show textual components */
    [class*=chat] > [class*=content] > [class*=container]:hover [class*=memberInner] > [class*=content]{
        visibility: visible !important;
    }

    /* Keep main chat portion centered */
    [class*=chat] > [class*=content]:hover [class*="chatContent"] {
        --translate-distance: calc(var(--collapsed-members-width) - var(--expanded-members-width)) !important;
        margin-right: var(--translate-distance);
        z-index: 0 !important;
        mask-image: linear-gradient(white, white), linear-gradient(black, black);
        mask-composite: exclude !important;
        mask-size: auto, calc(-1 * var(--translate-distance)) 100% !important;
        mask-position: top right !important;
        mask-repeat: no-repeat !important;
    }

    [class*="chatContent"]:hover {
        margin-right: 0 !important;
        mask-image: none !important;
    }

/*
  Settings Sidebar
  Rudimentary just so you can somewhat navigate
*/

  /*
    Collapsed State
  */

    /* Set the collapsed width of the settings navigation sidebar */
    [class*=modalContent] [class*=container] > [class*=sidebar] {
        width: var(--collapsed-settings-width) !important;
        max-width: var(--collapsed-settings-width) !important;
    }

    /* Hide various components */
    [class*=modalContent] [class*=itemContent] > [class*=text],
    [class*=modalContent] [class*=fixedContent] [class*=textContainer] {
        visibility: hidden !important;
    }

  /*
    Expanded State
  */

    /* On hover, expand the settings sidebar to its full width */
    [class*=modalContent] [class*=container] > [class*=sidebar]:hover {
        width: var(--expanded-settings-width) !important;
        max-width: var(--expanded-settings-width) !important;
    }

    /* Reveal the previously hidden elements when the sidebar is hovered */
    [class*=modalContent] [class*=container] > [class*=sidebar]:hover [class*=itemContent] > [class*=text],
    [class*=modalContent] [class*=container] > [class*=sidebar]:hover [class*=fixedContent] [class*=textContainer] {
        visibility: visible !important;
    }
}