@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 {
    &-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(--header-secondary);
    cursor: pointer;
    transform: rotate3d(0, 0, 1, 90deg);
    &:hover {
      color: var(--header-primary);
    }
  }
  &[vz-collapsed] {
    --vz-dashboard-sidebar-width: 70px;
    #{$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;
    }
    .discoverHeader-Ijkm_M {
      width: 0;
      visibility: hidden;
      margin-left: 0;
    }
    .content-3QAtGj {
      display: none;
    }
    /**
     * Game activity panel.
     */
     .body-GmmuPm {
       justify-content: center;
     }
     .actions-aUdUfC,
     .info-WdNIDE {
       display: none;
     }
    /**
     * Voice connected panel.
     */
     .actionButtons-14eAc_,
     .inner-tyMogq,
     .button-14-BFJ:first-of-type {
       display: none;
     }
     .inner-tyMogq {
       + div {
         margin: 0;
       }
      }
     .connection-3KRENF {
       justify-content: center;
     }
    /**
     * Account panel.
     */
    .avatarWrapper-2yR4wp {
      margin: 0;
    }
    .container-3baos1 {
      justify-content: center;
    }
    .nameTag-3uD-yy {
      &,
      & + div {
        display: none;  
      }
    }
  }
  .panels-j1Uci_ {
    width: var(--vz-dashboard-sidebar-width);
  }
}
