.JobSkill {
  display: flex;
  gap: $unit;
  align-items: center;

  &.editable:hover {
    cursor: pointer;

    & > img.editable,
    & > div.placeholder.editable {
      border: $hover-stroke;
      box-shadow: $hover-shadow;
      cursor: pointer;
      transform: $scale-tall;
    }

    & p.placeholder {
      color: var(--text-tertiary-hover);
    }

    & svg {
      fill: var(--icon-secondary-hover);
    }
  }

  & > img,
  & > div.placeholder {
    background: var(--card-bg);
    border-radius: calc($unit / 2);
    border: 1px solid rgba(0, 0, 0, 0);
    width: $unit * 5;
    height: $unit * 5;
  }

  & > div.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    & > svg {
      fill: var(--icon-secondary);
      width: $unit * 2;
      height: $unit * 2;
    }
  }

  p {
    color: var(--text-primary);

    &.placeholder {
      color: var(--text-tertiary);
    }
  }
}