/* ------------------------------
 テーブル
------------------------------- */
.acms-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-top: $acms-table-border;
	// データ
	th,
	td {
		padding: $acms-table-cell-padding;
		vertical-align: top;
		border-bottom: $acms-table-border;
	}
	th {
		text-align: left;
		vertical-align: top;
	}
	// ボーダーなし 上
	 &.acms-table-none {
		border-top: 0;
	}
	// ボーダーなし 下
	 &.acms-table-none th,
	 &.acms-table-none td {
		border-bottom: 0;
	}
}

.panel-body .acms-table {
	th,
	td {
		padding: 5px;
	}
	.acms-table-container{
		padding: 10px 5px;
	}
}

.acms-table,
.acms-table:before,
.acms-table:after,
.acms-table-admin-edit,
.acms-table-admin-edit th,
.acms-table-admin-edit td,
.acms-table-heading,
.acms-table-heading th,
.acms-table-heading td {
	@include box-sizing(border-box);
}

@if $admin==true {
	.acms-table-admin-edit th {
		line-height: 1.7;
	}

}




// ------------------------------
// テーブル 見出し
// ------------------------------
.acms-table-heading {
	// データ
	th,
	td {
		border-bottom: $acms-table-heading-border;
	}
	// 見出し
	th {
		color: $acms-table-heading-th-text-color;
		background: $acms-table-heading-th-bg;
	}
}




// ------------------------------
// テーブル ボーダー
// ------------------------------
.acms-table-bordered {
	border-top: $acms-table-bordered-border;
	border-left: $acms-table-bordered-border;
	th,
	td {
		border-right: $acms-table-bordered-border;
		border-bottom: $acms-table-bordered-border;
	}
}




// ------------------------------
// テーブル striped
// ------------------------------
.acms-table-striped{
	tr:nth-of-type(odd),
	tr.odd {
		background: $acms-table-border-odd;
	}
	tr:nth-of-type(even),
	tr.even {
		background: $acms-table-border-even;
	}
}




// ------------------------------
// テーブル hover
// ------------------------------
.acms-table-hover td,
.acms-table-hover-line tr{
	transition: .2s background-color;
}
.acms-table-hover tr:hover td,
.acms-table-hover tr:focus-within td,
.acms-table-hover tr.hover td {
	background: $acms-table-hover-bg;
	cursor: pointer;
}

.acms-table-hover-line tr:hover,
.acms-table-hover-line tr:focus-within,
.acms-table-hover tr.hover {
	background: $acms-table-hover-line-bg;
}




// ------------------------------
// テーブル 入力テーブル
// ------------------------------
.acms-table-edit{
	border-top: none;
	th,
	td{
		vertical-align: middle;
	}
	th{
		text-align: right;
	}
}



// ------------------------------
// テーブル 入れ替え
// ------------------------------
.acms-table-sortable-active {
	th,
	td,
	tr:nth-of-type(even) th,
	tr:nth-of-type(even) td,
	tr.even th,
	tr.even td{
		background-color: $acms-table-sortable-bg;
	}
}


// ------------------------------
// テーブル スクロール
// ------------------------------
[class*="acms-table-scroll-"],
.acms-table-responsive {
	border: 1px solid #ddd;
}


// $breakpoint-sm-max 以下
@media (max-width : $breakpoint-sm-max) {
  .acms-table-scroll-xs {
    @include table-scroll();
  }
}
// $breakpoint-sm-max 以上 $breakpoint-md-max以下
@media (min-width: $breakpoint-sm-min)and (max-width:$breakpoint-md-max) {
  .acms-table-scroll-sm {
    @include table-scroll();
  }
}
// $breakpoint-md-min 以上 $breakpoint-lg-max以下
@media (min-width: $breakpoint-md-min)and (max-width:$breakpoint-lg-max) {
  .acms-table-scroll-md {
    @include table-scroll();
  }
}
// $breakpoint-lg-min 以上 $breakpoint-xl-max以下
@media (min-width: $breakpoint-lg-min)and (max-width:$breakpoint-xl-max) {
  .acms-table-scroll-lg {
    @include table-scroll();
  }
}
// $breakpoint-xl-min以下
@media (min-width : $breakpoint-xl-min) {
  .acms-table-scroll-xl {
    @include table-scroll();
  }
}

@media (max-width : $breakpoint-md-max) {
	// ------------------------------
	// テーブル レスポンシブ
	// ------------------------------
	.acms-table-responsive {
		margin-bottom: 15px;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
    th,td {
			white-space: nowrap;
		}
	}

	.acms-table-scrollable, .js-table-unit-scroll-hint {
		th,td{
			display: table-cell !important;
			white-space: nowrap;
		}
	}

	// ------------------------------
	// テーブル entry
	// ------------------------------
	.acms-table-entry{
		th,
		td{
			display: block;
			width: 100%;
			padding-right: 0;
			padding-left: 0;
			@include box-sizing(border-box);
		}
		th{
			padding-bottom: 0;
			text-align: left;
		}
		td{
			padding-top: 3px;
		}
		.detail-fade-body th,
		.detail-fade-body td{
			padding-right: 10px;
			padding-left: 10px;
		}
	}
}



@if $admin == true {

	// ------------------------------
	// テーブル 管理画面
	// ------------------------------
	.acms-table-admin {
		width: 100%;
		border-collapse: collapse;
		// 見出し
		thead {
			border-bottom: 1px solid #e8e8e8;
		}
		thead th {
			padding: 5px;
			@include font-size(13);
			font-weight: bold;
		}
		th,
		td {
			padding: $acms-table-admin-cell;
			line-height: 1.3;
			border-bottom: $acms-table-admin-border;
		}
		th {
			text-align: left;
		}
		td{
			background-color: $acms-table-admin-td-bg;
		}

		@media screen and (max-width: $breakpoint-md-max) {
			th,
			td {
				padding: 5px;
			}
		}
	}

	// ------------------------------
	// テーブル 管理画面 striped
	// ------------------------------
	.acms-table-admin-striped{
		tr:nth-of-type(odd),
		tr.odd {
			background: $acms-table-admin-border-odd;
		}
		tr:nth-of-type(even),
		tr.even {
			background: $acms-table-admin-border-even;
		}
	}




	// ------------------------------
	// テーブル 編集画面
	// ------------------------------
	.acms-table-admin-edit {
		width: 100%;
		background: $acms-table-admin-edit-bg;
		border: $acms-table-admin-edit-border;
		@include font-size(14);

		thead {
			border-bottom: $acms-table-admin-edit-border;

			th,
			td {
				padding: 3px 10px;
			}
		}

		th {
			width: $acms-table-admin-edit-th-width;
			color: #424242;
			text-align: right;
			vertical-align: top;
			&.acms-table-nowrap {
				width: 1%;
			}
		}
		td,
		th {
			padding: 2px 5px;
		}


		// 下階層のtableは線なし
		table {
			width: 100%;
		}

		@media screen and (max-width: $breakpoint-md-max) {
			thead,
			tbody {
				th,
				td {
					display: block;
					width: 100% !important;
				}
			}

			tbody {
				th {
					padding-bottom: 5px;
					text-align: left;

					& + td {
						padding-bottom: 10px;
					}
				}
			}

		}

		@media (min-width : $breakpoint-md-min) {
			tr {
				border-bottom: 0;
			}

			td,
			th {
				padding: 5px 10px;
			}


			tr {
				&:first-child th,
				&:first-child td {
					padding: 10px 10px 5px;
				}

				&:last-child th,
				&:last-child td {
					padding: 5px 10px 10px;
				}

				&:only-child th,
				&:only-child td {
					padding: 10px 10px;
				}
			}
			thead {
				tr:first-child,
				tr:last-child,
				tr:only-child {
					th,
					td {
						padding: 3px 10px;
					}
				}
			}
		}
	}


	// メディア機能 テーブル
	.acms-table-admin-media-edit-wrap {
		margin: 0 -5px;
	}
	.acms-table-admin-media-edit {
		width: 100%;
		border: none;
		border-collapse: collapse;
		@include font-size(14);
		th {
			text-align: right;
		}
		th,
		td {
			padding: 5px;
			vertical-align: top;
		}

		@media screen and (max-width: $breakpoint-md-max) {
			th {
				text-align: left;
			}
			th,
			td {
				display: block;
				text-align: left;
			}
		}
	}

	// タブの直下の編集画面テーブル
	.acms-tabs-panel {
		.acms-table-admin-edit {
			border: 0;
		}
	}

	.acms-table-admin-edit-bordered {
		width: 100%;
		@include font-size(14);

		tr {
			border: $acms-table-admin-edit-bordered-border;
		}

		th {
			max-width: $acms-table-admin-edit-bordered-th-width;
			padding: 10px;
			text-align: right;
			vertical-align: top;
		}

		td,
		th {
			padding: 5px 10px;
		}

		&-th-x {
			border-right: $acms-table-admin-edit-bordered-border;
		}


		// 下階層のtableは線なし
		table {
			tr {
				border: none;
			}
		}

		@media screen and (max-width: $breakpoint-md-max) {
			th,
			td {
				display: block;
				text-align: left;
			}
		}
	}


	// ---------------
	// テーブル ミニ
	// ---------------
	.acms-admin-mini-table {
		width: 100%;
		margin: 0;
		border: 1px solid $acms-admin-mini-table-border;
		border-collapse: collapse;
		box-sizing: border-box;

		thead {
			background: #FFF;
			border-bottom: 1px solid $acms-admin-mini-table-border;
		}

		tr,
		td,
		th {
			padding: 7px 10px;
		}
		th {
			text-align: left;
		}

		+ p {
			margin-top: -15px;
		}

		.acms-admin-mini-table-action{
			width: 80px;
		}

		.acms-admin-mini-table-import-action{
			width: 120px;
		}

		ul{
			margin-bottom: 0;
			padding-left: 1em;
		}
	}

	[class*="acms-table-scroll-"],
	.acms-table-responsive {
		.acms-admin-mini-table {
			border: 0;
		}
	}

	.acms-table .acms-table-action{
		width: 50px;
	}

	[class*="acms-table-scroll-"] .acms-table-admin,
  .acms-table-responsive .acms-table-admin {
    tr:last-child td {
      border-bottom: 0;
    }
  }
}





// ---------------
// テーブル カラー
// ---------------
// info
.acms-table-info {
	 & th,
	 & td,
	 &,
	.acms-table-hover  &:hover th,
	.acms-table-hover  &:hover td,
	.acms-table-hover  &:hover {
		background: $acms-table-info-bg;
	}
}

// success
.acms-table-success {
	 & th,
	 & td,
	 &,
	.acms-table-hover  &:hover th,
	.acms-table-hover  &:hover td,
	.acms-table-hover  &:hover {
		background: $acms-table-success-bg;
	}
}

// warning
.acms-table-warning {
	 & th,
	 & td,
	 &,
	.acms-table-hover  &:hover th,
	.acms-table-hover  &:hover td,
	.acms-table-hover  &:hover {
		background: $acms-table-warning-bg;
	}
}

// danger
.acms-table-danger {
	 & th,
	 & td,
	 &,
	.acms-table-hover  &:hover th,
	.acms-table-hover  &:hover td,
	.acms-table-hover  &:hover {
		background: $acms-table-danger-bg;
	}
}




// ---------------
// ユーティリティ
// ---------------
// 中央揃い
.acms-table-center{
	text-align: center;

	.acms-table-admin-edit &,
	.acms-table-admin-edit-bordered &,
	.acms-table-admin & {
		text-align: center;
	}
}

// 左揃い
.acms-table-left{
	text-align: left;

	.acms-table-admin-edit &,
	.acms-table-admin-edit-bordered &,
	.acms-table-admin & {
		text-align: left;
	}
}

// 折り返し禁止
.acms-table-nowrap {
	width: 1%;
	white-space: nowrap;
}

.acms-table-break-word {
	word-break: break-word;
}
