$accent-color: var(--accent-color, #685fff);
$python-color: #d9b831;
$background-color: #121212;
$border-color: #2a2a2a;
$text-color: #ebebeb;
$muted-text-color: #cccccc;
$active-btn-bg: #2c2c2c;
$hover-btn-bg: #202020;
$icon-color: #a8a8a8;

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .tools-page-wrapper {
    height: calc(100vh - 4.3rem);
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 1rem 3rem;

    position: relative;

    .tool-type-toggle {
      display: flex;
      margin-bottom: 1.5rem;
      margin-top: 0; /* Removed margin-top as requested */

      .toggle-btn {
        background-color: transparent;
        border: 1px solid $border-color;
        color: $text-color;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 12px; /* Changed to 12px as requested */
        margin-right: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        i {
          color: $icon-color;
          font-size: 1.1rem;
        }

        &:hover {
          background-color: $hover-btn-bg;
        }

        &.active {
          background-color: $active-btn-bg;
          border-color: $accent-color;
          color: $accent-color;

          i {
            color: $accent-color;
          }
        }

        &.python-btn {
          &.active {
            border-color: $python-color;
            color: $python-color;

            i {
              color: $python-color;
            }
          }
        }
      }
    }

    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .tools-page-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 1rem;
      padding-bottom: 1.5rem;

      .no-tools {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;

        p {
          color: $muted-text-color;
          font-size: 1.1rem;
        }
      }
    }
  }
}
