@use'../variables' as*;
.fui-sidebar{
    width:320px;
    &-nav{
      background-color: rgba($color: $primary, $alpha: .05);
        height: calc(100vh - 118px);
        &-content{
          height: calc(100vh - 200px);
          &::-webkit-scrollbar {
              width: 3px;
              height: 3px;
              border-radius: 10px;
            }
            &::-webkit-scrollbar-track {
              background: rgba($color: $primary, $alpha: .0); 
              border-radius: 10px;
            }
            &::-webkit-scrollbar-thumb {
              background: rgba($color: $primary, $alpha: .0); 
              border-radius: 10px;
            }
            &::-webkit-scrollbar-thumb:hover {
              background: rgba($color: $warning, $alpha: .0); 
            }
            &:hover{
              &::-webkit-scrollbar-track {
                background: rgba($color: $primary, $alpha: .15); 
              }
              &::-webkit-scrollbar-thumb {
                background: rgba($color: $primary, $alpha: .75); 
              }
              &::-webkit-scrollbar-thumb:hover {
                background: rgba($color: $warning, $alpha: .75); 
              }
            }
        }
    }
}
.fui-main{
    width:calc(100vw - 344px);
    &-content{
        height: calc(100vh - 82px);
        &::-webkit-scrollbar {
            width: 3px;
            height: 3px;
            border-radius: 10px;
          }
          &::-webkit-scrollbar-track {
            background: rgba($color: $primary, $alpha: .0); 
            border-radius: 10px;
          }
          &::-webkit-scrollbar-thumb {
            background: rgba($color: $primary, $alpha: .0); 
            border-radius: 10px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: rgba($color: $warning, $alpha: .0); 
          }
          &:hover{
            &::-webkit-scrollbar-track {
              background: rgba($color: $primary, $alpha: .15); 
            }
            &::-webkit-scrollbar-thumb {
              background: rgba($color: $primary, $alpha: .75); 
            }
            &::-webkit-scrollbar-thumb:hover {
              background: rgba($color: $warning, $alpha: .75); 
            }
          }
    }
    
  &-page-content{
    height: calc(100vh - 94px);
    &-nav{
      height: calc(100vh - 155px);
      &::-webkit-scrollbar {
          width: 3px;
          height: 3px;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-track {
          background: rgba($color: $primary, $alpha: .0); 
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
          background: rgba($color: $primary, $alpha: .0); 
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: rgba($color: $warning, $alpha: .0); 
        }
        &:hover{
          &::-webkit-scrollbar-track {
            background: rgba($color: $primary, $alpha: .15); 
          }
          &::-webkit-scrollbar-thumb {
            background: rgba($color: $primary, $alpha: .75); 
          }
          &::-webkit-scrollbar-thumb:hover {
            background: rgba($color: $warning, $alpha: .75); 
          }
        }
    }
  }
}


.fui-coding{
  &-nav{
    max-width: 518px;
    margin-bottom: -29px;
  }
  &-body{
    --fui-t-center: 307px;
    --fui-t-extend: 268px;
    --fui-t: 34px;
  }
}










/*=== RTL ===*/
// [dir=rtl]{
    
// }




@media (max-width:1199px){
    .fui-sidebar{
        width:100%;
        &-nav{
            height: calc(100vh - 118px);
        }
    }
    .fui-main{
        width:100%;
        &-content{
            height: auto;
            max-height: calc(100vh - 234px);
        }
        &-h-full{
            height: auto;
            max-height: calc(100vh - 170px);
        }
    }


}