.pane.tools {
  --primary-color: #fbbc43;
  --primary-color-50: #fff8ec;
  --primary-color-100: #fef2d9;
  --primary-color-200: #fee8bd;
  --primary-color-300: #fddea1;
  --primary-color-400: #fcd385;
  --primary-color-500: #fbbc43;
  --primary-color-600: #d5a039;
  --primary-color-700: #b0842f;
  --primary-color-800: #8a6725;
  --primary-color-900: #644b1b;
  --top-color: #fbbc43;
  --collapsed-color: #fee8bd;
  --collapsed-text-color: #8a6725;

  position: relative; /* for tool-show */

  @media (min-width: 768px) {
    .pane-bar {
      overflow-y: auto;
      padding-bottom: 20px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
    .pane-bar::-webkit-scrollbar {
      display: none; /* WebKit */
    }
  }

  .bar-tools {
    display: flex;
    flex-direction: column;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
    /* Desktop */
    @media (min-width: 768px) {
      overflow-y: auto;
      overflow-x: hidden;
      gap: 5px;
    }
    /* Mobile */
    @media (max-width: 767.5px) {
      flex-direction: row;
      gap: 10px;
    }

    .bar-tool {
      cursor: pointer;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* Desktop */
      @media (min-width: 768px) {
        padding: 0 20px;
      }
      /* Mobile */
      @media (max-width: 767.5px) {
        font-size: 12px;
        flex-shrink: 0;
        max-width: 100px;
      }

      &:hover {
        color: var(--primary-color-700);
      }
    }
  }

  .pane-content {
    main {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: calc(100% - 40px);
      max-width: var(--content-max-width, 1400px);
      margin: 40px 20px 80px;
      padding: 32px 24px;
      align-self: stretch;
      box-sizing: border-box;

      @media (max-width: 1023.5px) {
        width: calc(100% - 48px);
        margin: 32px auto 64px;
        padding: 24px;
      }

      @media (max-width: 767.5px) {
        width: 100%;
        margin: 20px 0 60px;
        padding: 20px;
        border-radius: 12px;
      }

      .pane-title {
        .submit-btn {
          margin-right: 50px;
        }
      }
    }
  }

  section.tool-show {
    position: absolute;
    inset: 0;
    background: white;
  }

  @media (min-width: 768px) {
    &.active {
      .pane-content,
      .tool-show {
        left: var(--bar-width);
        right: 0;
      }
    }
  }
}