/* Shared entity links and overflow tooltips for match, VRS and rankings UI. */
.vrs-card__team-action,
.vrs-card__player,
.rankings-table__team-name,
.rankings-table__player {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vrs-card__team-action,
.rankings-table__team-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vrs-card__player,
.rankings-table__player {
  color: color-mix(in srgb, var(--text-soft) 88%, var(--text));
}

.vrs-card__team-action:hover,
.vrs-card__team-action:focus-visible,
.vrs-card__player:hover,
.vrs-card__player:focus-visible,
.rankings-table__team-name:hover,
.rankings-table__team-name:focus-visible,
.rankings-table__player:hover,
.rankings-table__player:focus-visible {
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.rankings-table__roster {
  display: block;
}

.rankings-table__separator,
.vrs-card__separator {
  color: color-mix(in srgb, var(--text-soft) 72%, transparent);
}

.rankings-table__team-name {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .sidebar-match-featured__team-name,
    .sidebar-match-row__team-name,
    .sidebar-match-featured__competition,
    .sidebar-match-row__competition,
    .matches-tournament-item,
    .rankings-table__team-name,
    .vrs-card__team-action
  ) {
    position: relative;
  }

  :where(
    .sidebar-match-featured__team-name,
    .sidebar-match-row__team-name,
    .sidebar-match-featured__competition,
    .sidebar-match-row__competition,
    .matches-tournament-item,
    .rankings-table__team-name,
    .vrs-card__team-action
  )[data-sidebar-tooltip="true"]:hover::after,
  :where(
    .sidebar-match-featured__team-name,
    .sidebar-match-row__team-name,
    .sidebar-match-featured__competition,
    .sidebar-match-row__competition,
    .matches-tournament-item,
    .rankings-table__team-name,
    .vrs-card__team-action
  )[data-sidebar-tooltip="true"]:focus-visible::after {
    position: absolute;
    z-index: 70;
    left: 50%;
    bottom: calc(100% + 7px);
    width: max-content;
    max-width: min(280px, 78vw);
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--text));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-strong) 96%, var(--text));
    box-shadow: var(--shadow-popover);
    color: var(--text);
    content: attr(data-sidebar-entity-name);
    font-size: 0.72rem;
    font-weight: 780;
    line-height: 1.18;
    overflow-wrap: anywhere;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
    white-space: normal;
  }

}