src/components/TabsHeader/Tab/Tab.scss
@import '../../../constants/styles';

.draggable-tab {
  height: 34px;
  display: flex;
  align-items: center;
  padding-top: 2px;

  .Tab {
    height: 30px;
    min-width: 104px;
    width: 130px;
    max-width: 130px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    direction: ltr;
    cursor: pointer;
    background-color: var(--gray-2);
    border: none;
    padding: 0;

    .file-text {
      min-width: 60%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: var(--multi-tab-text-color);

      p {
        max-width: 130px;
        padding-inline-start: 4px;
        font-size: var(--font-size-default);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &.disabled {
        user-select: none;
        cursor: wait;
      }
    }

    .hide {
      display: none;
    }

    &:focus-visible {
      outline: var(--focus-visible-outline);
      outline-offset: -3px;
      border-radius: 4px;
    }
  }

  .Button {
    margin: 6px;
    height: 24px;

    .Icon {
      width: 16px;
      height: 16px;
      flex: inherit;
    }
  }

  .divider {
    background-color: var(--multi-tab-divider);
    width: 1px;
    height: var(--multi-tab-divider-height);
    inset-block-start: var(--multi-tab-divider-top);
    position: absolute;
  }

  &:not(.active) {
    box-shadow: inset 0 -1px 0 0 var(--multi-tab-divider);
    background-color: var(--gray-2);
  }

  &.active {
    border-top-left-radius: var(--multi-tab-border-radius);
    border-top-right-radius: var(--multi-tab-border-radius);
    box-shadow: inset 0 1px 0 0 var(--multi-tab-divider), inset 1px 0 0 0 var(--multi-tab-divider),
      inset -1px 0 0 0 var(--multi-tab-divider), 0 0 0 0px;
    background-color: var(--multi-tab-active-tab-background);

    .file-text {
      color: var(--multi-tab-active-text-color);
    }

    .divider {
      display: none;
    }

    .Tab {
      background-color: var(--multi-tab-active-tab-background);
    }
  }

  &:hover {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--multi-tab-hover-border);
    background-color: var(--view-header-button-hover);

    .divider {
      display: none;
    }

    .Tab {
      background-color: var(--view-header-button-hover);
    }
  }

  .close-button-wrapper {
    display: grid;
    justify-items: end;

    .Button {
      width: 24px;
    }
  }
}
