$sidebar-z: 1 !default;
$sidebar-width: 250px !default;
$sidebar-border-inline-end: var(--rz-border-normal) !default;
$sidebar-background-color: var(--rz-base-800) !default;
$sidebar-color: var(--rz-white) !default;

.rz-sidebar {
  background-color: var(--rz-sidebar-background-color);
  color: var(--rz-sidebar-color);
  position: fixed;
  overflow: auto;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: var(--rz-sidebar-z);
  width: var(--rz-sidebar-width);
  opacity: 1;
  transition: width var(--rz-transition), opacity var(--rz-transition);

  // Variations for border with different sidebar positions (start, end, left, right)
  &.rz-sidebar-start {
    border-inline-end: var(--rz-sidebar-border-inline-end);
  }

  &.rz-sidebar-left {
    border-right: var(--rz-sidebar-border-inline-end);
  }

  &.rz-sidebar-end {
    border-inline-start: var(--rz-sidebar-border-inline-end);
  }

  &.rz-sidebar-right {
    border-left: var(--rz-sidebar-border-inline-end);
  }
}

@media (max-width: 768px) { 
  .rz-sidebar-responsive {
    width: 0;
    opacity: 0;
  }
}

.rz-sidebar-expanded {
  width: var(--rz-sidebar-width);
  opacity: 1;
}

.rz-sidebar-collapsed {
  width: 0 !important;
  opacity: 0;
}
