@import 'less-config.less';

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


table.table {
	table-layout:fixed;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;

	> caption {
		font-size:1.3rem;
		padding: 1rem 0 0.5rem 1rem;
		font-weight: bold;
		text-align: left;
	}

	> thead {
		>tr {
			>th, >td {
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F1F1F1');
				background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);

				border: 1px solid #DEDEDE;
				border-top: 1px solid #AEAEAE;
				border-bottom: 1px solid #4C545B;
				padding: 1rem 0;
			}
			>th {
				text-align: center;
			}
		}
	}
	> tbody {
		>tr {
			>th, >td {
				border: 1px solid #DEDEDE;
				padding: 1rem 0.3rem;
				overflow-x: hidden;
				text-overflow: ellipsis;
			}

			>th {
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F1F1F1');
				background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);

				font-weight: inherit;
				vertical-align: middle;
				text-align:center;
			}
		}
	}
	&.tiny {
		>thead {
			>tr {
				>th, >td {
					padding: 0.2rem !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 0.2rem !important;
				}
			}
		}
	}
	&.small {
		>thead {
			>tr {
				>th, >td {
					padding: 0.5rem 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 0.5rem 0.2rem !important;
				}
			}
		}
	}
	&.big {
		>thead {
			>tr {
				>th, >td {
					padding: 2rem 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 2rem 1rem !important;
				}
			}
		}
	}

	&.list {
		>thead {
			>tr {
				>th, >td {

					/* 소팅 아이콘 */
					>span {
						margin: 0 3px;

						&.list_sort {
							background-repeat:no-repeat;
							background-position:100% 50%;
							cursor:pointer;
							display:block;

							&.list_sort_asc {
								background-image:url(data:image/gif;base64,R0lGODlhCQAJAIABAO0gJP///yH5BAEAAAEALAAAAAAJAAkAAAIPjAOnwIrcDJxvQoez3qEAADs=);
							}
							&.list_sort_desc {
								background-image:url(data:image/gif;base64,R0lGODlhCQAJAIABADxXp////yH5BAEAAAEALAAAAAAJAAkAAAINjI+py+D/AoxmJnpRAQA7);
							}
						}
					}
				}
			}
		}
		>tbody {
			> tr:nth-child(2n):not(.no-sel) {
				background-color: rgba(0,0,50,.02);

				>th, >td{
				}
			}
		}
	}
	
	&.line {
		>thead {
			>tr {
				>th, >td {
					border-left: 0;
					border-right: 0;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					border-left: 0;
					border-right: 0;
				}
			}
		}
	}

	&.no-padding {
		>tbody {
			>tr {
				>th, >td {
					padding:0;

					>input[type="text"], >textarea {
						border: 0;
						width: -webkit-fill-available !important; 
						width: -moz-available !important; 
						width: fill-available !important; 
						padding: 0.5rem;
						margin: 0;
						vertical-align: top;
						
						&:hover, &:focus {
							background-color: @color_yellow;
						}
					}
				}
			}
		}
	}

	&.flat {
		>thead {
			>tr {
				>th {
					background: @color_brightgrey;
				}
			}
		}
		>tbody {
			>tr {
				>th {
					background: @color_brightgrey;
				}
			}
		}
	}

	&.simple {
		max-width: 100%;
		>thead, >tbody {
			>tr {
				>th {
					background: @color_brightgrey;
					font-weight: 700;
					text-align: center;
				}
			}
		}
		>thead , >tbody {
			>tr {
				>th, >td {
					border: 1px solid @color_black;
					padding: 1rem;
					min-width: 5rem;
				}
			}
		}
		>tbody {
			>tr {
				>th {
					width: 10rem;
				}
			}
		}
	}

	&.bottom-line {
		>tbody {
			>tr:first-child {
				>th, >td {
					border-top: 0;
				}
			}
			>tr:last-child {
				>th, >td {
					border-bottom: 0;
				}
			}
			>tr {
				>th:first-child, >td:first-child {
					border-top: 0;
					border-left: 0;
				}
			}
			>tr {
				>th:last-child, >td:last-child {
					border-right: 0;
					border-bottom: 0;
				}
			}
		}
	}
	
	&.hoverable {
		tbody{
			tr:hover {
				th,td {background-color:#ffffcc;}
			}
		}
	}

	&.no-border {
		>thead, >tbody {
			>tr {
				>th, >td {
					border: 0;
					vertical-align: top;
					background: unset;
				}
			}
		}
	}
}

@media only screen and (max-width: @screen_mobile_max) {
	table.table.stackable {
		width: 100%;
		table-layout: auto;

		> thead {
			display: block;
			> tr {
				padding-top: 1rem;
				padding-bottom: 1rem;
			}
		}
		> tbody {
			display: block;
			> tr {
				padding-top: 1rem;
				padding-bottom: 1rem;
			}
		}
		> tfoot {
			display: block;
		}
	}
	table.table.stackable > thead,
	table.table.stackable > tbody,
	table.table.stackable > thead > tr:not(.display-hidden),
	table.table.stackable > tbody > tr:not(.display-hidden),
	table.table.stackable > thead > tr > th:not(.display-hidden),
	table.table.stackable > thead > tr > td:not(.display-hidden),
	table.table.stackable > tbody > tr > th:not(.display-hidden),
	table.table.stackable > tbody > tr > td:not(.display-hidden)  {
		width: auto !important;
		display: block !important;
	}

	table.table.stackable > thead > tr > th:not(:first-child),
	table.table.stackable > thead > tr > td:not(:first-child),
	table.table.stackable > tbody > tr > th:not(:first-child),
	table.table.stackable > tbody > tr > td:not(:first-child) {
		border-top: 0;
	}
}