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

.tags {
  display: flex;
}

.tag {
  --offset: calc(var(--pxOffset, .5px) * var(--index, 0));

  width: var(--size, 8px);
  height: var(--size, 8px);
  transform: translateZ(1px) rotate(45deg) translate(calc(-1 * var(--offset)), var(--offset));
  background-color: int.$warmgray-60;
  outline: 1px solid #fff;

  &.gop {
    background-color: int.$gop-50;

    &.dark {
      background-color: int.$gop-70;
    }
  }

  &.dem {
    background-color: int.$dem-50;

    &.dark {
      background-color: int.$dem-70;
    }
  }
}