.sui-prj-pipeline-action {
  position: relative;
  width: rem(38);
  height: rem(38);
  line-height: rem(38);
  padding: 0;
  background-color: $sui-color-primary;
  border-radius: 50%;
  box-shadow: $sui-shadow-400;
  color: $sui-color-brand-denim-100;
  transition: all 0.2s ease-in;

  svg {
    fill: currentColor;
    height: 100%;
  }

  &:hover {
    transform: translateY(rem(-2)) scale(1.05);
    box-shadow: $sui-shadow-500;
  }

  &:active,
  &:focus {
    transform: translateY(rem(-4)) scale(1.03);
    box-shadow: $sui-shadow-600;
  }

  &.as--hidden {
    opacity: 0.1;
  }
}