/* -------------------------------------------------------- */
/* 🔹 Tab Selector                                          */
/* -------------------------------------------------------- */
/* Underline-style tabs with sliding animation               */
/* Mirrors tab_selector.dart                                 */

.tab-selector {
  position: relative;
  display: flex;
  align-items: center;
}


/* -------------------------------------------------------- */
/* 🔹 Tab                                                   */
/* -------------------------------------------------------- */

.tab-selector__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: var(--text-body-small);
  font-weight: 400;
  color: var(--color-on-surface-variant);
  padding: var(--space-s) var(--space-m);
  cursor: pointer;
  height: 40px;
  min-width: 60px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Reserve bold-width space so tabs don't shift on selection */
.tab-selector__tab::after {
  content: attr(data-text);
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  display: block;
  pointer-events: none;
}

.tab-selector__tab:hover {
  color: var(--color-primary);
}

.tab-selector__tab--active {
  color: var(--color-primary);
  font-weight: 600;
}

.tab-selector__tab:disabled {
  color: var(--color-on-surface-variant);
  opacity: 0.5;
  cursor: default;
}

.tab-selector__tab:disabled:hover {
  color: var(--color-on-surface-variant);
}

.tab-selector__tab[hidden] {
  display: none;
}


/* -------------------------------------------------------- */
/* 🔹 Underline Indicator                                   */
/* -------------------------------------------------------- */

.tab-selector__indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}