@import '../scss/variables.scss';

.table {
  width: calc(100% - 2px);
  border-radius: $border-radius-medium;
  border-collapse: collapse;
  border-style: hidden;
  box-shadow: 0 0 0 1px var(--border-color);
  overflow: hidden;
  font-size: var(--font-size-15);
  line-height: var(--line-height-15);
}

.cell {
  border: 1px solid var(--border-color);
  height: 2.25rem;
  padding: .25rem .625rem;
  word-break: break-word;
}

.key {
  background-color: var(--background-color);
  word-break: normal;

  .boldKey & {
    font-weight: var(--font-weight-bold);
  }
}

.value {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.peer {
  display: flex;
  gap: .5rem;
  align-items: center;
  color: var(--primary-color);
  cursor: pointer;

  :global(.avatar) {
    flex-shrink: 0;
  }
}

.anonymous {
  background: linear-gradient(180deg, #6ED2FF 1.72%, #34A4FC 94.83%);
  border-radius: 50%;
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 1.125rem;
    object-fit: contain;
  }
}

.button {
  font-size: var(--font-size-12);
  line-height: 0.5625rem;
  padding: 0.28125rem 0.375rem 0.34375rem 0.375rem;
  border-radius: 999px;
  color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), .1);
  white-space: nowrap;

  &:not([disabled]):hover {
    background: rgba(var(--primary-color-rgb), .2);
  }

  &[disabled] {
    cursor: default;
  }
}