.transition {
  &-hover {
    box-shadow: 0 2px 4px -2px rgba(var(--color-text-main), .2);

    transition: var(--input-animation-transition);

    &:hover:not(:active) {
      border-radius: 4px;
      box-shadow: 0 4px 8px -2px rgba(var(--color-text-main), .2);
    }
  }

  &-pulse {
    user-select: none;

    transition: border-radius $input-animation-duration, box-shadow $input-animation-duration;
    -webkit-tap-highlight-color: transparent;

    &:active {
      border-radius: 4px;
      outline: none;
      box-shadow: 0 0 0 4px rgba(var(--color-black), .2);
    }
  }

  &-image {
    overflow: hidden;

    img {
      transform: scale(1.02);
    }

    &:active {
      img {
        transform: scale(1);
      }
    }

    &-smooth {
      img {
        transition: transform $input-animation-duration $curve-standard;
      }
    }
  }
}