@use '@vizality' as vz;

:root {
  --vz-dashboard-sidebar-width: 240px;
}

.vz-dashboard-sidebar {
  $base: &;
  width: var(--vz-dashboard-sidebar-width);
  .vz-error-boundary {
    height: 100%;
    padding: 20px;
    &-block {
      background: var(--background-secondary-alt);
    }
  }
  &-item {
    &[vz-selected]:hover {
      color: #fff;
    }
    &-icon-wrapper {
      @include vz.size(32px);
    }
    &.disabled {
      #{$base}-item-icon-wrapper,
      #{$base}-item-icon-wrapper + div {
        opacity: .5!important;
        cursor: not-allowed;
      }
      #{$base}-item-inner {
        cursor: not-allowed;
      }
      &:hover {
        color: var(--header-secondary);
        #{$base}-item-inner {
          background: none;
        }
      }
    }
  }
  &-separator {
    @include vz.size(100%, 1px);
    margin: 10px 0 10px 10px;
    background: var(--background-modifier-accent);
  }
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-collapser {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transform: rotate3d(0, 0, 1, 90deg);
    &:hover {
      color: var(--header-primary);
    }
  }
  &[vz-collapsed] {
    --vz-dashboard-sidebar-width: 64px;
    #{$base}-collapser {
      transform: rotate3d(0, 0, 1, 270deg);
      margin-left: 8px;
    }
    #{$base}-item-inner {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #{$base}-item-icon-wrapper {
      margin: 0;
    }
    #{$base}-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #{$base}-header > :first-child {
      width: 0;
      visibility: hidden;
      margin-left: 0;
    }
    .content-1U25dZ {
      display: none;
    }
    /**
     * Game activity panel.
     */
     .body-GmmuPm {
       justify-content: center;
     }
     .actions-aUdUfC,
     .info-WdNIDE {
       display: none;
     }
    /**
     * Voice connected panel.
     */
     .actionButtons-2vEOUh,
     .inner-llGtyq,
     .button-12Fmur:first-of-type {
       display: none;
     }
     .inner-llGtyq {
       + div {
         margin: 0;
       }
      }
     .connection-3k9QeF {
       justify-content: center;
     }
    /**
     * Account panel.
     */
    .avatarWrapper-1B9FTW {
      margin: 0;
    }
    .container-YkUktl {
      justify-content: center;
    }
    .nameTag-sc-gpq {
      &,
      & + div {
        display: none;  
      }
    }
  }
  .panels-3wFtMD {
    width: var(--vz-dashboard-sidebar-width);
  }
  /**
   * MacOs titlebar drag zone fix.
   */
  .platform-osx &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 10;
    -webkit-app-region: drag;
  }
}
