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

.cell-name {
  position: relative;
  height: 56px;
  padding: int.$spacing-3 int.$spacing-1 int.$spacing-3 int.$spacing-8;

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

  &.no-headshot {
    padding-left: int.$spacing-1;
  }
}

.name-icon-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: int.$spacing-2;
  white-space: nowrap;

  &.dimmed {
    color: int.$warmgray-50;
  }
}

.candidate-headshot-container {
  position: absolute;
  height: 100%;
  top: 0;
  left: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(var(--headshot-tilt-angle));
}

.icon {
  color: var(--election-palette-main);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropped-label {
  color: int.$warmgray-60;
  text-transform: uppercase;
  font-weight: normal !important;

  @include int.overline($size: "000"); 
}