@import '~styles/variables'

$-border-width = $border-width-base
$-item-padding = ($grid-gutter-width / 2)
$-item-padding-xs = ($grid-gutter-width-xs / 2)
$-item-padding-v = $-item-padding * 0.75
$-item-padding-xs-v = $-item-padding-xs * 0.75
$-avatar-size = 40px
// This is the padding around the event item container. We do it this way to fit the grid.
$-item-padding-container = $-item-padding - $-border-width

-activity-feed-item-padding()
	padding-top: $-item-padding-xs-v
	padding-bottom: $-item-padding-xs-v
	padding-left: $-item-padding-xs
	padding-right: $-item-padding-xs

	@media $media-sm-up
		padding-top: $-item-padding-v
		padding-bottom: $-item-padding-v
		padding-left: $-item-padding-container
		padding-right: $-item-padding-container

-activity-feed-item()
	-activity-feed-item-padding()
	change-bg('bg')
	elevate-xs()
	margin-left: -($grid-gutter-width-xs / 2)
	margin-right: -($grid-gutter-width-xs / 2)
	overflow: hidden
	// Overwrites the default box shadow animation that is not needed on this element
	transition: border-color 200ms ease !important

	@media $media-sm-up
		rounded-corners-lg()
		elevate-1()
		margin-left: 0
		margin-right: 0
		border: $-border-width solid transparent

		&:hover
			border-color: var(--theme-link)
			cursor: pointer
			// This will immediately show the border and then transition out.
			transition: none !important
