/* 
	Tables
    =========================================================================== 

	Table styling uses the Bootstrap classes and overrides some styles in order to make them 
	look like the Gambio Admin theme. 
	
	bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss
	
*/

.table {
	thead {
		tr {
			th {
				background: $body-bg;
				border: none;
				color: $text-color-light;
				outline: none;

				&:first-of-type {
					padding-left: $padding-large;
				}

				&:last-of-type {
					padding-right: $padding-large;
				}
			}

			&:first-child {
				th {
					border-bottom: 3px solid $brand-primary;
				}
			}
		}
	}

	tbody {
		tr {
			td {
				white-space: nowrap;
				border-top: none;

				&:not(.actions) {
					// This styling will might be overridden by "datatable_normalize_overflow" extension.
					text-overflow: ellipsis;
					overflow: hidden;

					& > *:not(.single-checkbox) {
						display: inline-block;
						max-width: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
						vertical-align: middle;
						color: $text-color;
					}
				}

				&.numeric {
					text-align: right;
				}

				&, .single-checkbox {
					min-width: 14px;
					vertical-align: middle;
				}

				.visible-on-hover {
					visibility: hidden;
				}

				&.actions {
					a {
						text-decoration: none;
					}

					.fa {
						margin-right: $margin-large;
					}

					.meta-icon {
						margin: ($margin-small / 2) ($margin-small / 2) ($margin-small / 2) 0;

						&.fa {
							font-size: 16px;
							color: $text-color-light;
						}
					}

					.hidden-columns-content {
						cursor: default;
					}
				}

				&:first-of-type {
					padding-left: $padding-large;
				}

				&:last-of-type {
					padding-right: $padding-large;
				}
			}

			&:hover {
				td {
					background: $body-bg-dark;
				}

				.visible-on-hover {
					visibility: visible;
				}
			}
		}
	}

	&.table-row-small {
		thead {
			tr {
				th {
					padding: ($padding-small / 3) $padding-small;
				}
			}
		}

		tbody {
			tr {
				td {
					padding: ($padding-small / 6) $padding-small;

					.dropdown, &.dropup {
						& > button {
							padding: ($padding-small / 6) ($padding-small / 2);
						}
					}
				}
			}
		}
	}

	&.table-row-medium {
		thead {
			tr {
				th {
					padding: ($padding-small / 2) $padding-small;
				}
			}
		}

		tbody {
			tr {
				td {
					padding: ($padding-small / 2) $padding-small;

					.dropdown, .dropup {
						& > button {
							padding: ($padding-small / 3) $padding-small;
						}
					}
				}
			}
		}
	}

	&.table-row-large {
		thead {
			tr {
				th {
					padding: $padding-small;
				}
			}
		}

		tbody {
			tr {
				td {
					padding: $padding-small;
				}
			}
		}
	}

	// The following style is working in cooperation with the datatable_extensions.js library.
	&.table-fixed-header {
		thead.fixed {
			display: table;
			table-layout: fixed;
			position: fixed;
			top: $header-height;
			z-index: $zindex-content-header - 1;
		}
	}

	&.table-modules {
		thead tr,
		tbody tr {
			height: 49px;
		}

		tbody {
			tr {
				&.active {
					background-color: tint($gray-base, 91%);

					td {
						&:last-of-type {
							line-height: 2;

							&::before {
								content: "";
								font-family: 'Font Awesome 5 Free';
								line-height: 1;
								text-rendering: auto;
								font-size: 24px;
								display: inline-block;
								float: right;
							}
						}

						&:hover {
							cursor: default;
						}
					}
				}

				td {
					border-bottom: 1px solid $border-color;

					.collapse-icon {
						width: 12px;

						i {
							&.fa {
								font-size: 14px;
							}
						}
					}

					&:hover {
						cursor: pointer;
					}
				}
			}
		}
	}

	&.table-payment {
		th, td {
			&:first-of-type {
				width: 12px;
			}
		}
	}

	// Tables that share the page with a configuration box
	&.table-left {
		width: 75.2%;
		max-width: $breakpoint-width-large;
	}

	/*
	Customer Group Table
    ==========================================================================
    
    Used to style icons in table for customer Group in Gambio Admin Style.
	*/
	&.customer-group-table {
		tbody {
			tr {
				.icons-column {
					i {
						min-width: 12px;
						text-align: center;
					}
				}
			}
		}
	}
}