:root {
  --color-data-table-header-background: var(--purple-1);
  --color-data-table-row-border: var(--gray-1);
}

[data-theme="dark"] {
  --color-data-table-header-background: var(--blue-6);
  --color-data-table-row-border: var(--gray-3);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table thead {
  background-color: var(--color-data-table-header-background);
}

.data-table thead th {
  color: var(--white-1);
  font-weight: 400;
  padding: 0.625rem;
  position: relative;
  min-width: fit-content;
}

.data-table thead th .header-content {
  display: flex;
  align-items: center;
  margin: 0.2rem 0;
}

.header-span-highlight {
  color: var(--black-1);
  font-weight: 500;
}

.data-table tbody td {
  padding: 0.625rem;
  color: var(--color-text);
  min-width: fit-content;
}

.data-table .data-row {
  background-color: transparent;
  border-top: 0.0625rem solid var(--purple-1);
}

.data-table .data-row a {
  color: var(--color-text);
}

.data-table .link-row {
  background-color: transparent;
  border-top: 0.0625rem solid var(--color-data-table-row-border);
}

.data-table .domain-link {
  color: var(--purple-1);
  font-weight: 300;
  text-decoration: underline;
}

.data-table .link-separator {
  color: var(--purple-1);
}

/* Domain Action Button */

.domain-action-button {
  color: var(--purple-1);
  background-color: transparent;
  padding: 0.3125rem;
  border: 0.0625rem solid var(--purple-1);
  border-radius: 0.3125rem;
  cursor: pointer;
  font-size: small;
  width: max-content;
  font-weight: 500;
}

/* Watch List Icon */

.filled-watchlist-icon {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  fill: var(--purple-1);
  stroke: var(--purple-1);
}

.stroked-watchlist-icon {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  fill: transparent;
  stroke: var(--purple-1);
}

/* Header Action Icon */

.data-table .info-icon {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  visibility: hidden;
  cursor: pointer;
}

.data-table .close-icon {
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  visibility: hidden;
  cursor: pointer;
}

.data-table .sort-icon {
  height: 0.625rem;
  width: 0.625rem;
  cursor: pointer;
  visibility: hidden;
  margin-right: 0.2rem;
}

.data-table thead th:hover .info-icon,
.data-table thead th:hover .sort-icon,
.data-table thead th:hover .close-icon {
  visibility: visible;
}

/* Tooltip Styles */

.tooltip {
  display: none;
  will-change: transform; /* To hint the browser to repaint avoiding visual glitches */
}

.tooltip.visible {
  display: block;
  position: absolute;
  margin-top: 0.625rem;
  top: 100%;
  transform: translateX(-30%);
  background: var(--color-background);
  color: var(--color-text);
  padding: 1rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--color-separator-border);
  z-index: 8;
  text-align: left;
  width: max-content;
  max-width: 18rem;
  max-height: 6.25rem;
  overflow-y: auto;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
}

.tooltip-title {
  font-weight: 700;
  font-size: 0.8125rem;
}

.tooltip-close {
  width: 0.625rem;
  height: 0.625rem;
  cursor: pointer;
}

.tooltip-description {
  font-size: 0.75rem;
}

/* Domain Name Cell Styles */

.domain-name-container {
  display: flex;
}

.domain-name-container .domain-name {
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.domain-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
}

.screenshot-icon {
  height: 1.1rem;
  width: 1.1rem;
  cursor: pointer;
  color: var(--purple-1);
  margin-top: 0.4rem;
}

.warning-icon {
  width: 1rem;
  height: 1rem;
  color: var(--red-1);
  margin-top: 0.2rem;
}

@media (pointer: fine) {
  .domain-name-container .domain-name:hover {
    color: var(--purple-1);
  }
}