.dockTabs {
  --min-tab-width: 120px;

  overflow: hidden;
}

.tabs {
  width: 100%;

  display: flex;
  overflow: hidden;

  &:empty {
    display: none;
  }

  &:global(.scrollable) {
    overflow: auto;
    overflow-x: overlay;  /* Set scrollbar inside content area */

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }

    &:hover {
      &::-webkit-scrollbar {
        width: 100%;
        height: 3px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 0;
        height: 3px;
        background-color: rgba(106, 115, 125, 0.2);
      }
    }

    &::before, &::after {
      content: "\00A0";
      position: sticky;
      min-width: 8px;
      z-index: 1;
    }

    &::before {
      left: 0;
      background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%);
    }

    &::after {
      right: 0;
      background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%);
    }
  }
}