$item-list-padding-x: 10px !default;
$item-list-padding-y: 10px !default;
$item-list-line-height: 1.4rem !default;
$item-list-col-grow: 3 !default;
$item-list-col-shrink: 3 !default;

/* *******************************************
*		  Item List general styles
********************************************** */

.item-list {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 0;
	line-height: $item-list-line-height;

	@include media(lg) {
		font-size: 1rem;
	}

	@include media(md) {
		font-size: 0.95rem;
	}

	@include media-down(sm) {
		font-size: 1.05rem;
	}

	display: flex;
	flex-flow: column nowrap;

	&.striped {
		& > li {
			border-bottom: 1px solid $item-list-color-border;
		}

		& > li:nth-child(2n + 1) {
			background-color: lighten($color-divider, 12%);

			@include media-down(sm) {
				background-color: lighten($color-divider, 11%);
			}
		}

		.item-list-footer {
			border-bottom: none;
		}
	}
}


/* *******************************************
*			Item general styles
********************************************** */


.item-list {
	.item {
		display: flex;
		flex-direction: column;
	}

	.item-row {
		display: flex;
		align-items: stretch;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		min-width: 100%;

		&.nowrap {
			flex-wrap: nowrap;
		}
	}

	.item-col {
		align-items: center;
		display: flex;
		padding: $item-list-padding-y $item-list-padding-x $item-list-padding-y 0;
		flex-basis: 0;
		flex-grow: $item-list-col-grow;
		flex-shrink: $item-list-col-shrink;
		margin-left: auto;
		margin-right: auto;
		min-width: 0;

		&.fixed {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: auto;
		}

		&.pull-left {
			margin-right: auto;
		}

		&.pull-right {
			margin-left: auto;
		}

		& > div {
			width: 100%;
		}

		&:last-child {
			padding-right: 0;
		}
	}

	.no-overflow {
		overflow: hidden;
	}

	.no-wrap {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


/* *******************************************
*				Item components
********************************************** */


.item-list {

	/********************************************
	*					Header
	*********************************************/

	.item-list-header {
		.item-col.item-col-header {
			span {
				color: #999;
				font-size: 0.8rem;
				font-weight: 700 !important;
			}
		}
	}

	/********************************************
	*					Heading
	*********************************************/

	.item-heading {
		font-size: 0.9rem;
		display: none;
		color: #666;
		font-weight: 700;
		padding-right: $item-list-padding-x;

		@include media-down(sm) {
			display: block;
		}

		@include media(sm) {
			width: 100%;
		}

		@include media-down(xs) {
			width: 40%;
		}
	}

	/********************************************
	*					Checkbox
	*********************************************/

	.item-col.item-col-check {
		flex-basis: 20px + $item-list-padding-x;

		@include media-down(sm) {
			order: -8;
		}
	}

	.item-check {
		margin-bottom: 0;

		.checkbox + span {
			padding-right: 0;

			&:before {
				width: 20px;
			}
		}
	}

	/********************************************
	*					Image
	*********************************************/

	.item-col.item-col-img {
		display: flex;
		flex-basis: 60px + $item-list-padding-x;

		&.xs{
			flex-basis: 30px + $item-list-padding-x;
		}

		&.sm {
			flex-basis: 40px + $item-list-padding-x;
		}

		&.lg {
			flex-basis: 90px + $item-list-padding-x;
		}

		&.xl {
			flex-basis: 110px + $item-list-padding-x;
		}

		a {
			width: 100%;
			// display: flex;
		}
	}

	.item-img {
		flex-grow: 1;
		align-self: stretch;
	    background-color: #efefef;
	    padding-bottom: 100%;
		width: 100%;
		height: 0;

	   	@include bg-cover();
	}

	/********************************************
	*					Title
	*********************************************/

	.item-col.item-col-title {

		@include media-down(sm) {
			order: -4;
		}

		a {
			display: block;
		}
	}

	.item-title {
		margin: 0;
		font-size: inherit;
		line-height: inherit;
		font-weight: 600;
	}

	/********************************************
	*					Stats
	*********************************************/

	.item-stats {
		height: $item-list-line-height;
	}

	/********************************************
	*				     Actions
	*********************************************/

	.item-col.item-col-actions-dropdown {
		flex-basis: 30px + $item-list-padding-x;
		text-align: center;
		padding-left: 0 !important;

		@include media-down(sm) {
			order: -3;

			flex-basis: 30px + $item-list-padding-x !important;
			padding-right: $item-list-padding-x;
		}
	}

	.item-actions-dropdown {
		position: relative;
		font-size: 1.1rem;

		&.active {
			.item-actions-block  {
				max-width: 120px;
			}

			.item-actions-toggle-btn {
				color: $color-primary;

				.active {
					display: block;
				}

				.inactive {
					display: none;
				}
			}
		}

		.item-actions-toggle-btn {
			color: lighten($color-text-light, 10);
			font-size: 1.2rem;
			cursor: pointer;
			width: 100%;
			line-height: 30px;
			text-align: center;
			text-decoration: none;

			.active {
				display: none;
			}
		}

		.item-actions-block {
			height: 30px;
			max-width: 0px;
			line-height: 30px;
			overflow: hidden;
			position: absolute;
			top: 0;
			right: 100%;
			background-color: $color-divider;
			border-radius: 3px;
			transition: all 0.15s ease-in-out;

			&.direction-right {
				right: auto;
				left: 100%;
			}


			.item-actions-list {
				padding: 0;
				list-style: none;
				white-space: nowrap;
				padding: 0 5px;

				li{
					display: inline-block;
					padding: 0;
				}

				a {
					display: block;
					padding: 0 5px;

					&.edit {
						color: #38424C;
					}

					&.check {
						color: #40B726;
					}

					&.remove {
						color: #DB0E1E;
					}
				}
			}
		}

	}

	/********************************************
	*			   Something else?
	*********************************************/

}


/* *******************************************
*				Adjustments
********************************************** */

// Item which is located inside card inside item-list
.card > .item-list .item > .item-row {
	padding: 0 $card-padding-x;

	@include media-up(xl) {
		padding: 0 $card-padding-x-xl;
	}

	@include media-down(sm) {
		padding: 0 $card-padding-x-sm;
	}
}
