@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 90%;

		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:not(.icon),
		& > select,
		& > input{
			flex: 0 1 30%;

			// fix
			&.taglist{
				margin: 0;
				margin-left: 1.5em;
			}
		}

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

			&:hover{ background-color: darken(#fff,1%); }

			&.create:hover{ border-left-color: $form-valid-color; }

			&:hover,
			&.bcours:hover{ border-left-color: $form-search-color;  }
			&.btd:hover{    border-left-color: $form-valid-color;   }
			&.btp:hover{    border-left-color: $form-invalid-color; }

		}


		/* (1.3) Select elements*/
		& > select{
			display: block;
			position: relative;
				height: 1.8em;

			margin: 0;
			margin-right: 1em;
			padding: .2em .5em;
			padding-right: 1em;

			border: 1px solid lighten($form-neutral-color, 5%);
			border-radius: 3px;

			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em bottom .1em no-repeat;
			background-size: auto 80%;

			color: #999;
			font-size: .8em;

			cursor: default;

			-webkit-appearance: none;
			-moz-appearance:    none;
			appearance:         none;

			// flex: 0 1 15em;

			&.min{ flex: 0 1 5em; }

		}

		/* (1.4) Input */
		& > input{
			display: inline-block;
			position: relative;
				min-width: 0;

			margin:  0;
			padding: .22em .5em;

			flex: 0 1 5em;
		}

		/* (1.5) Icon (remove) */
		& > div.icon{
			display: inline-block;
				width: 1.2em;
				height: 1.2em;

			margin-right: 1em;

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

			overflow: hidden;

			cursor: pointer;

			&:hover{ background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); }

			&.remove{
				background-image: url('/asset/svg/cross.svg@aaaaaa');
				&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
			}

			&.hidden{ background: transparent; }
		}
	}


	/* (2) Filter */
	& > section.filter{


		background-color: transparent;

		text-transform: uppercase;

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

		& > div{

			cursor: default;

			& > span.arrow{
				display: inline-block;
				position: relative;
					width: 1.5em;
					height: 1.5em;

				margin-bottom: -.3em;

				background: url() center center no-repeat;
				background-size: auto 100%;

				cursor: pointer;
			}

			// selected filter
			&[data-filter='1']{
				color: $primary-color;

				& > span.arrow{

					&[data-way='-1']{   background-image: url('/asset/svg/up_arrow.svg@555555'); }
					&[data-way='1']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
				}

			}

		}

	}

	/* Tags color -> darker */
	.tag,
	& > section > select{
		color: $primary-color;
	}

}