.jsdos-rso {
  .sidebar-thin {
    @apply absolute left-0 top-0 h-full flex flex-col items-center z-10 w-4;
    background: linear-gradient(90deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%);

    .sidebar-slider {
      @apply absolute top-0 bottom-0 left-4;
    }
  }

  .sidebar {
    @apply absolute left-0 top-0 h-full flex flex-col items-center py-2 z-10;
    background: linear-gradient(90deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%);
    width: var(--sidebar-width);

    .sidebar-slider {
      @apply absolute top-0 bottom-0;
      left: var(--sidebar-width);
    }

    .contentbar {
      @apply flex-grow;
    }

    .sidebar-badge {
      @apply absolute right-0 bottom-0 w-3 h-3 rounded-full animate-pulse;
      background-color: hsl(var(--p));
    }

    .cycles {
      @apply text-xs overflow-hidden text-right w-full pr-2 mt-1 -mb-2 whitespace-nowrap opacity-50;
      color: hsl(var(--bc));

      &.higlight,
      &:hover {
        color: hsl(var(--af));
      }
    }

    .network-button {
      &.inactive {
        @apply opacity-50;
      }
    }
  }

  .sidebar-button {
    @apply cursor-pointer h-8 w-8 my-2 relative;
    color: hsl(var(--bc));
  }

  .sidebar-highlight,
  .sidebar-button:hover {
    color: hsl(var(--af));
  }

  .animate-led {
    animation: pulse 300ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .save-buttons {
    .text-badge {
      @apply absolute left-0 top-0 w-3 h-3 font-bold rounded-full flex items-center justify-center;
      font-size: 0.5rem;
    }
  }

}