lens/src/renderer/components/dock/dock-tab.module.scss

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

.DockTab {
  padding: var(--padding);
  height: 32px;
  position: relative;
  border-right: 1px solid var(--dockTabBorderColor);
  background-size: 1px 3ch;
  overflow: hidden;

  /* Allow tabs to shrink and take all parent space */
  min-width: var(--min-tab-width);
  flex-grow: 1;
  flex-basis: 0;
  max-width: fit-content;

  &:last-child {
    border-right: none;
  }

  &.pinned {
    padding-right: var(--padding);
  }

  &:last-child {
    padding-right: var(--padding);
  }

  &:global(.active) {
    background-color: var(--dockTabActiveBackground);
    background-image: none;
    border-bottom: 1px solid var(--primary);

    .close {
      opacity: 1;
    }

    &::before {
      display: none;
    }
  }

  &::before {
    content: " ";
    display: block;
    position: absolute;
    width: 5px;
    height: 100%;
    right: 0;
    background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 25%);
  }

  &::after {
    display: none;
  }

  &:not(:global(.active)):hover {
    background-color: var(--dockTabActiveBackground);
    background-image: none;

    .close {
      opacity: 1;
      background: linear-gradient(90deg, transparent 0%, var(--dockTabActiveBackground) 25%);
    }

    &::before {
      display: none;
    }
  }
}

.close {
  position: absolute;
  right: 0px;
  width: 5ch;
  opacity: 0;
  text-align: center;
  background: linear-gradient(90deg, transparent 0%, var(--dockTabActiveBackground) 25%);
}

.tabIcon {
  opacity: 0;
}

.title {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}