/* :root {
      --sidebar-w: 72px;
      --sidebar-bg: #eee;
      --sidebar-border: #e6e9ef;
      --sidebar-border-radius: 2.6rem;
      --sidebar-space: 0.4rem;
      --sidebar-font-size: 0.8rem;
      --sidebar-final-delay: 0.6s;
  } */

  /* Animation  starts */

  @keyframes popIn-tool {
      to {
          opacity: 1;
          /* font-size: var(--toolbar-font-size); */
          padding: var(--toolbar-space);
      }
  }

  /* 
  @keyframes expandToolbar {
      0% {
          width: 60px;
          border-radius: 50%;
      }

      100% {
          width: 320px;
          border-radius: 30px;
      }

  }

  @keyframes bubblePop {
      0% {
          transform: scale(0.9);
      }

      50% {
          transform: scale(1.2);
      }

      100% {
          transform: scale(1);
      }
  } 

  @keyframes popIn {
      0% {
          opacity: 0;
          transform: scale(0.5) translateY(20px);
      }

      80% {
          transform: scale(1.1) translateY(0);
      }

      100% {
          opacity: 1;
          transform: scale(1) translateY(0);
      }

  }

*/

  /* Animation  ends */


  .sidebar-wrapper {
      /* width: var(--sidebar-w); */
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      left: var(--sidebar-space);
      top: 0;
      bottom: 0;
      margin: auto;
      pointer-events: none;
  }


  .sidebar {
      /* width: var(--sidebar-w); */
      background: white;
      border-radius: var(--sidebar-border-radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      /*
      */

      padding: var(--sidebar-space);
      gap: var(--sidebar-space);
      box-shadow: 0px var(--sidebar-space) calc(var(--sidebar-space)*4) rgba(0, 0, 0, 0.5);
      pointer-events: auto;
  }


  /* side-bottom button(3) start */

  .tool {
      font-size: 0;
      padding: 0;
      opacity: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      animation: popIn-tool 0.4s var(--chip-final-delay) ease forwards;
      /* animation: popIn-tool 0.5s var(--sidebar-final-delay) cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; */
  }

  .tool-btn {
      border-radius: var(--sidebar-border-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--sidebar-border);
      background: var(--sidebar-bg);
      cursor: pointer;
      user-select: none;
      font-size: inherit;
      padding: inherit;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
      aspect-ratio: 1;
      animation: popIn-tool 0.4s var(--chip-final-delay) ease-in-out forwards;

  }


  .tool-btn:active {
      transform: scale(0.9);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);

  }


  .tool-btn.active {
      border-color: var(--accent);
      box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
      background: #e8f0fe;
      color: var(--accent);
      transition: transform 0.15s ease, box-shadow 0.15s ease;

  }


  /* Animate each button with delay */

  .sidebar div:nth-child(1) {
      animation-delay: calc(var(--sidebar-final-delay) * 3);
      
  }

  .sidebar div:nth-child(2) {
      animation-delay: calc(var(--sidebar-final-delay) * 2);
  }

  .sidebar div:nth-child(3) {
      animation-delay: calc(var(--sidebar-final-delay)* 1);
  }

    .sidebar div:nth-child(4) {
      animation-delay: calc(var(--sidebar-final-delay) * 2);
  }

  .sidebar div:nth-child(5) {
      animation-delay: calc(var(--sidebar-final-delay) * 3);
  }


  .tool-label {
      margin-top: var(--sidebar-space);
      color: #666;
      font-size: inherit;
      padding: inherit;
      text-align: center
  }