@use "../../../../styles/int.scss";

.tooltip-container {
  display: flex;
  flex-direction: column;
  row-gap: int.$spacing-1;
}

.tooltip-header {
  border-bottom: 1px solid int.$warmgray-100;
  padding-bottom: int.$spacing-1;
  margin-bottom: int.$spacing-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: int.$spacing-4;
}

.cand-dot {
  background-color: var(--color);
  height: int.$spacing-3;
  width: int.$spacing-3;
  border-radius: 100%;
}

.cand-title {
  display: flex;
  align-items: center;
  column-gap: int.$spacing-1;
}

.cand-label,
.state-label {
  color: int.$warmgray-100;

  @include int.sans($size: "200", $role: "component", $weight: "bold");
}

.state-del {
  @include int.sans($size: "100", $role: "component");
}

.cand-count {
  @include int.sans($size: "200", $role: "component");
}

.cand-table {
  border-collapse: collapse;
  width: 100%;

  thead tr {
    table-layout: fixed;
    border-bottom: 1px solid int.$warmgray-20;
    color: int.$warmgray-60;
    border-spacing: 1rem;

    th {
      @include int.sans($size: "100", $role: "component", $weight: "regular");
    }

    th:nth-child(2) {
      text-align: right;
    }

    &:first-of-type {
      text-align: left;
    }
  }

  tbody {
    color: int.$warmgray-100;

    td {
      padding-block: calc(int.$spacing-1 / 2);
    }

    tr:first-child td {
      padding-top: int.$spacing-2;
    }

    .state-cell {
      @include int.title($size: "100");
    }

    .del-cell {
      text-align: right;

      @include int.sans($size: "100", $role: "component");
    }
  }
}