@import '../constants';




/* [3] List style -> container
---------------------------------*/
#CONTAINER.list{
	animation: bg-fade .2s ease-out forwards;
}

#CONTAINER > div.list.container{
	display: flex;

	// flex properties
	flex-direction:  row;
	justify-content: stretch;
	align-items:     flex-start;
	flex-wrap:       wrap;


	/* (1) List element */
	& > section{

		flex: 1 1 95%;

		display: flex;

		margin: 0;
		padding: .8em 1em;

		border-bottom: 1px solid #eee;
		background-color: #fff;

		// no border-bottom for last child
		&:last-of-type{ border-bottom: 0; }

		// flex properties
		flex-direction:  row;
		justify-content: flex-start;
		align-items:     center;
		flex-wrap:       nowrap;

		/* (1.1) Element item */
		& > div{
			flex: 1 1 0;

			// fix
			&.taglist{ margin: 0; }
		}

		/* (1.2) Hover animation */
		transition: border-left-color .3s ease-in-out;
		&:not(.filter){
			border-left: .2em solid #fff;

			&:hover{ border-left-color: $form-search-color; }

		}
	}


	/* (2) Filter */
	& > section.filter{
		padding-bottom: 0;

		background-color: transparent;

		text-transform: uppercase;

		color:       #aaa;
		font-size:   .8em;
		font-weight: bold;
		text-shadow: 1px 1px 2px #fff;

		& > div:after{
			content: '';
			display: inline-block;
			position: absolute;
				width: 1.5em;
				height: 1.5em;

			margin-top: -.25em;
			margin-left: .5em;

			background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
			background-size: auto 100%;

			&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
		}

	}


	/* (3) List title */
	& > h1{

		flex: 1 0 95%;

		display: inline-block;

		margin: .8em 1.2em;

		font-size: inherit;
		color: #888;

	}

	/* (4) List separator */
	& > hr{
		display: block;
		position: relative;

		margin: 1em 1.5em;

		border: 0;
		border-bottom: 2px solid darken($bg-color, 5%);
	}

}