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

.cand-container {
  display: flex;
  flex-wrap: wrap;
  gap: int.$spacing-3;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: flex-start;
}

.cand-dot {
  --size: int.$spacing-3;

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

.cand-item {
  transition: opacity 150ms ease;

  &.fade {
    opacity: 40%;
  }
}

.cand-label {
  @include int.sans($size: "200", $role: "component", $weight: "bold");

  @include int.container-at-least("lg") {
    @include int.sans($size: "300", $role: "component", $weight: "bold")
  }
}

.del-label {
  padding-left: int.$spacing-4;

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