ul.sharing-users-list
	list-style: none
	margin: 0
	padding: 0

	li.sharing-users-item
		padding: 10px 0
		display: flex
		align-items: center
		cursor: default

		&:hover
			.sharing-users-action
				visibility: visible
			.sharing-users-details
				.sharing-users-name
					color: $color-text-dark-primary

		&.active, &.added
			color: $color-primary
			.sharing-users-details
				.sharing-users-name, .sharing-users-extra
					color: $color-primary
			.sharing-users-avatar
				img
					transform: scale(1.2)

		&.added
			.sharing-users-details
				.sharing-users-name, .sharing-users-extra
					color: $color-success

		&.self
			.sharing-users-details
				.sharing-users-name
					color: $color-info
			.sharing-users-action
				visibility: visible
			.sharing-users-avatar img
				border: 2px solid $color-info

		.sharing-users-avatar
			max-width: 60px
			text-align: center
			margin-right: 10px

			img
				margin: 0 auto
				width: 40px
				height: 40px
				border-radius: 50%
				overflow: hidden
				border: thin solid lighten($color-text-dark-hint, 10%)
				transition: transform 350ms ease-in-out

		.sharing-users-details
			flex: 1
			display: flex
			flex-direction: column

			.sharing-users-name
				font:
					size: 1.2em
					weight: 400
				color: $color-text-dark
				transition: color 350ms ease-in-out

				small
					color: $color-text-dark-hint
					white-space: nowrap

			.sharing-users-extra
				font:
					size: .9em
					weight: 300
				color: $color-text-dark-primary
				transition: color 350ms ease-in-out

		.sharing-users-action
			visibility: hidden
			span
				font-size: .9em
				color: $color-text-dark-hint

			button
				background: none
				border: none

				&.user-remove
					color: $color-danger

					&:hover
						color: lighten($color-danger, 10%)

.sharing-users-intro,
.sharing-users-info
	h4
		font-family: $font-body

.sharing-users-info
	padding-left: 15px
	border-left: thin solid $color-text-dark-hint

	p
		font:
			size: 1.1em
			weight: 300

.sharing-users-search
	.disabled
		color: $color-text-dark-secondary
		padding-bottom: 10px

.algolia-autocomplete
	position: relative
	width: 100%
	&:before
		content: '\e81c'
		font-family: 'pillar-font'
		position: absolute
		font-size: .9em
		top: 7px
		left: 15px
		z-index: 1
		color: $color-text-dark-secondary

.algolia-autocomplete .aa-input
	padding-left: 35px
	width: 100%


.algolia-autocomplete .aa-hint
	width: 100%
	color: $color-text-dark-hint

.algolia-autocomplete .aa-dropdown-menu
	width: 100%
	background-color: white
	border: 1px solid $color-text-dark-hint
	border-top: none
	border-bottom-left-radius: 3px
	border-bottom-right-radius: 3px
	box-shadow: 0 15px 30px rgba(black, .1)

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion
	cursor: pointer
	padding: 5px 4px

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor,
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor em
	background-color: $color-primary
	color: white

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em
	font-style: normal
	color: $color-primary

/* Generic listing on settings */
ul.list-generic
	margin: 0
	padding: 0
	list-style: none
	max-width: 500px

	+media-xs
		width: 100%

	> li
		padding: 5px 0
		display: flex
		align-items: center

		.action
			margin-right: 10px

			.btn
				font-size: .7em

		a
			padding-right: 10px

.settings-footer
	text-align: right
	color: $color-text-dark-secondary
	border-top: thin solid rgba(black, .1)
	margin-top: 15px
	padding-top: 15px
	padding-right: 15px
	font-size: .9em

	a
		color: $color-text-dark-secondary