/* 
	QuickEdit Overview 
    ========================================================================== 

	Styling for the main table. 
	
*/

&.overview {
	.table {
		thead {
			tr {
				&:first-child {
					th:last-child {
						padding-right: 0;
					}

					th {
						&.edit-mode {
							border-bottom: 3px solid $gray-light;
						}
					}
				}

				&.filter {
					th {
						background: $table-filter-bg-color;

						&:last-child {
							min-width: 300px;
						}
					}
				}

				&.edit {
					th {
						background: $gray-lighter;
					}
				}

				th {
					&.status {
						text-align: center;
					}

					span {
						~ i {
							&.fa {
								&.fa-caret-down {
									position: absolute;
									color: $text-color-light;
									margin-left: $margin-small / 2;
									cursor: pointer;

									&:before {
										vertical-align: middle;
									}
								}
							}
						}
					}
				}
			}
		}

		tbody {
			tr {
				td {
					i {
						&.fa-caret-down {
							display: none;
							position: absolute;
							color: $text-color-light;
							cursor: pointer;
							margin: $margin-small/6 0 0 $margin-small/2;

							&:before {
								vertical-align: middle;
							}
						}
					}

					&.status {
						text-align: center;
					}

					&.actions {
						i {
							&.fa {
								vertical-align: middle;
							}
						}
					}

					&.editable {
						& > input {
							text-align: right;
						}
					}

					&:not(.numeric) {
						& > input {
							text-align: left;
						}
					}

					.details-control {
						width: 50px;
						height: 12px;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						margin: 0 auto;
						padding: 0;
						border: 0;

						&.active {
							color: $component-active-color;
							background-color: $brand-primary;
							border-bottom: none;
						}
					}

					.details-control:focus {
						outline: 0 !important;
					}

					&.price-details-control {
						padding: 5px 0 20px 0
					}

					& > table {
						float: left;
					}

					& > table thead tr, table thead tr th {
						background: none;
					}

					& > table tbody tr, table tbody tr th {
						color: $gray-light;
						background: none;
					}

					& > table tbody tr:first-child, table tbody tr th:first-child {
						padding-left: 24px;
					}

					& > table tbody tr td {
						padding-right: 2px;

						&:not(:first-child) {
							padding-left: 0;
						}

						& > input {
							width: 100px;
						}

						& > button {
							color: $gray-light;
						}
					}
				}

				&:hover {
					i {
						&.fa-caret-down {
							display: inline-block;
						}
					}
				}
			}
		}
	}
}