$image-size: 40px;

.bc-list {
	width: 100%;

	& > .bc-list-container {
		@include bc-box-sizing;
		display: inline-block;
		position: relative;
		width: 100%;
		height: auto;
		min-height: 400px;
		padding: 0;
		overflow: visible;
		overflow-x: auto;

		& > .bc-list-table {
			display: table;
			min-width: 100%;

			& > .bc-list-header {
				display: table-header-group;
				margin: 0;
				padding: 0;

				& > span {
					display: table-cell;
					margin: 0;
					padding: 16px 10px 15px;
					border-bottom: 1px solid $bc-color-12;
					color: $bc-color-3;
					font: 16px/1 $ft-bold;
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-spacing: 0;
					overflow: hidden;

					&:nth-child(2) {
						padding: 16px 10px 15px 0;
						text-align: left;
					}

					&:last-of-type {
						padding: 16px 0 15px 10px;
						text-align: right;
					}

					&.header-extra {
						display: none;
						width: 1px;
						padding: 0;
						border-bottom: 0;
					}
				}

				&.image {
					& > span {
						&.header-extra {
							display: table-cell;
						}
					}
				}

				&.selector {
					& > span {
						&.header-extra {
							display: table-cell;
						}
					}
				}
			}

			& > .bc-loading {
				display: none;

				&.show {
					display: block;
				}
			}

			& > .bc-list-body {
				display: table-row-group;

				&.hide {
					display: none;
				}

				& > span {
					&.list-extra {
						display: none;
						position: relative;
						width: 1px;
						padding: 0;
						border-bottom: 0;

						& > .select {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							width: $image-size;
							height: $image-size;
							margin: 8px 0;
							float: left;
							opacity: 0;
							z-index: 1;

							& > div {
								@include bc-box-sizing;
								width: 40px;
								height: 40px;
								padding: 0;

								& > .box {
									margin: 0;
								}
							}
						}
					}
				}

				& > .list-no-results {
					@include bc-box-sizing;
					display: block;
					position: absolute;
					width: 100%;
					padding: 0;

					& > span {
						width: 100%;
						padding: 50px 0 0;
						float: left;
						color: $bc-color-11;
						font: 22px/1 $ft-norm;
						text-align: center;
						vertical-align: middle;
					}
				}

				& > .list-row {
					display: table-row;
					padding: 0;

					&.hide {
						display: none;
					}

					& > span {
						display: table-cell;
						margin: 0;
						padding: 16px 10px 15px;
						border-bottom: 1px solid $bc-color-5;
						color: $bc-color-3;
						font: 16px/1 $ft-norm;
						text-align: center;
						text-overflow: ellipsis;
						white-space: nowrap;
						border-spacing: 0;
						overflow: hidden;
						vertical-align: middle;

						&:nth-child(2) {
							padding: 16px 10px 15px 0;
							text-align: left;
						}

						&:last-of-type {
							padding: 16px 0 15px 10px;
							text-align: right;
						}

						&.list-extra {
							display: none;
							position: relative;
							width: 1px;
							padding: 0;
							border-bottom: 0;

							& > .image {
								@include bc-box-sizing;
								display: none;
								position: relative;
								width: $image-size;
								height: $image-size;
								margin: 8px 24px 8px 0;
								float: right;
								border: 1px solid $bc-color-5;
								border-radius: $image-size;
								overflow: hidden;
								z-index: 2;

								& > img {
									width: 100%;
									height: 100%;
								}
							}

							& > .select {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: $image-size;
								height: $image-size;
								margin: 8px 0;
								float: left;
								opacity: 0;
								z-index: 1;

								& > div {
									@include bc-box-sizing;
									width: 40px;
									height: 40px;
									padding: 0;

									& > .box {
										margin: 0;
									}
								}
							}
						}
					}
				}

				&.large {
					& > .list-row {
						& > span {
							padding: 20px 10px;

							&:nth-child(2) {
								padding: 20px 10px 20px 0;
							}

							&:last-of-type {
								padding: 20px 0 20px 10px;
							}

							&.list-extra {
								padding: 0;
							}
						}
					}
				}

				&.clickable {
					& > .list-row {
						cursor: pointer;

						& > span {
							&:nth-child(2) {
								color: $bc-color-1;
							}
						}
					}
				}

				&.image {
					& > .list-row {
						& > span {
							&.list-extra {
								display: table-cell;
								width: 24 + $image-size;

								& > .image {
									display: block;
								}
							}
						}
					}
				}

				&.selector {
					& > .list-row {
						&.select-all {
							@include bc-transition(width .5s ease-in);
							display: block;
							position: absolute;
							top: 0;
							width: 0;
							height: 43px;
							overflow: hidden;

							& > .select {
								@include bc-transition(opacity .5s ease-in);
								display: inline-block;
							}
						}

						& > .list-extra {
							@include bc-transition(width .5s ease-in);
							display: table-cell;
							height: 100%;

							& > .select {
								@include bc-transition(opacity .5s ease-in);
								display: inline-block;
							}
						}
					}

					&.edit {
						& > .list-row {
							&.select-all {
								width: $image-size;

								& > .select {
									opacity: 1;
								}
							}

							& > .list-extra {
								width: $image-size;

								& > .select {
									opacity: 1;
								}
							}
						}
					}

					&.image {
						&.edit {
							& > .list-row {
								& > .list-extra {
									width: 24 + $image-size + $image-size;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media print {

	.bc-list {

		& > .container {
			overflow: hidden;
		}
	}
}