/*
 * TW tabs: единственный visual owner для saved views, record tabs,
 * page tabs и компактных переключателей.
 *
 * Принятый язык — rounded segmented controls. Underline-вариантов в
 * product references нет.
 */

.tw-tab-group,
.tw-tab-switch {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-width: max-content;
  padding: var(--tw-space-0-5);
  align-items: center;
  gap: 1px;
  overflow-x: auto;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface-subtle);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
  scrollbar-width: none;
}

.tw-tab-group::-webkit-scrollbar,
.tw-tab-switch::-webkit-scrollbar {
  display: none;
}

.tw-tab-group--bar {
  min-height: var(--tw-control);
}

.tw-tab-group--compact,
.tw-tab-switch {
  min-height: var(--tw-control-compact);
}

.tw-tab-item,
.tw-tab-switch > :is(button, a),
.tw-tab-group__group > :is(button, a) {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-height: var(--tw-control-tool);
  padding: 0 var(--tw-space-2);
  align-items: center;
  justify-content: center;
  gap: var(--tw-space-1);
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--tw-radius) - 2px);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-medium);
  line-height: var(--tw-line-meta);
  text-decoration: none;
  white-space: nowrap;
}

.tw-tab-group--bar > .tw-tab-item {
  min-height: calc(var(--tw-control) - var(--tw-space-1));
}

.tw-tab-group--compact > .tw-tab-item,
.tw-tab-switch > :is(button, a) {
  min-height: calc(var(--tw-control-compact) - var(--tw-space-1));
  padding-inline: var(--tw-space-1-5);
  font-size: var(--tw-font-micro);
  line-height: var(--tw-line-micro);
}

.tw-tab-item:hover,
.tw-tab-switch > :is(button, a):hover,
.tw-tab-group__group > :is(button, a):hover {
  color: var(--tw-color-text);
  background: color-mix(
    in srgb,
    var(--tw-color-surface-raised) 72%,
    transparent
  );
}

.tw-tab-item:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-current="page"]
),
.tw-tab-switch > :is(button, a):is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-current="page"]
),
.tw-tab-group__group > :is(button, a):is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-current="page"]
) {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-raised);
  box-shadow: var(--tw-shadow-xs);
}

.tw-tab-item > .tw-badge {
  min-height: 17px;
  padding-inline: var(--tw-space-1);
}

.tw-tab-more {
  margin-left: auto;
}

.tw-tab-group--tools {
  height: var(--tw-control-compact);
  min-width: auto;
  overflow: visible;
}

.tw-tab-group__group {
  display: inline-flex;
  height: var(--tw-control-tool);
  align-items: center;
}

.tw-tab-group--tools > .tw-tab-group__group {
  padding: 0;
  background: transparent;
  border: 0;
}

.tw-tab-group--tools > :is(.tw-icon-button, .tw-button),
.tw-tab-group__group > :is(button, a) {
  min-width: var(--tw-control-tool);
  min-height: var(--tw-control-tool);
  height: var(--tw-control-tool);
  padding-inline: var(--tw-space-1-5);
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tw-tab-group--tools > :is(.tw-icon-button, .tw-button):is(
  :hover,
  [aria-pressed="true"],
  [aria-expanded="true"]
) {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-raised);
  box-shadow: var(--tw-shadow-xs);
}

.tw-tab-group--tools > :not(:first-child) {
  position: relative;
}

.tw-tab-group--tools > :not(:first-child)::before {
  position: absolute;
  top: var(--tw-space-1);
  bottom: var(--tw-space-1);
  left: -1px;
  width: 1px;
  content: "";
  background: var(--tw-color-border);
}

html[data-input-modality="keyboard"] :is(
  .tw-tab-item,
  .tw-tab-switch > button,
  .tw-tab-switch > a,
  .tw-tab-group__group > button,
  .tw-tab-group__group > a
):focus-visible {
  z-index: 1;
  outline: 2px solid var(--tw-color-focus);
  outline-offset: 2px;
}