@charset 'UTF-8';

//____________________________
//読み込み
//____________________________
@import 'configuration';

@import 'modifier';

@import 'reset';

//____________________________
//スタイル
//____________________________
.mywpdb {
	padding: 32px 16px;

	.-btn {
		height: 30px;
		background-color: lightgray;
		box-shadow: 2px 2px 8px rgba(black, 0.1);
		border: 1px solid gray;
		border-radius: 6px;
	}

	.mywpdb__form {
		// ---------- ボタン ----------
		.mywpdb__formButton {
			display: block;
			width: 100%;
			height: 100%;
			text-align: left;
		}
	}

	.mywpdbSearch__form {
		@include flex;
		align-items: flex-start;

		button ,
		input ,
		select {
			margin-right: 1.6rem;
		}

		button {
			display: inline-block;
		}

		.mywpdbSearch__selectWrap {
			@include flex;
			flex-direction: column;
			height: 200px;
			margin-right: 1.6rem;

			.mywpdbSearch__selectButton {
				width: 100%;
			}

			.mywpdbSearch__select {
				width: 100%;
				height: 200px;
			}
		}

		.mywpdbSearch__keyword {
		}

		.mywpdbSearch__submit {
		}
	}

	// ---------- テーブル ----------
	.mywpdbTable {
		// ---------- tr ----------
		.mywpdbTable__tr {
			th ,
			td {
				padding: 4px 8px;
				border: 1px solid #000000;
			}

			// ---------- head ----------
			.mywpdbTable__head {
				color: #ffffff;
				background-color: #000000;

				* {
					color: #ffffff;
				}
			}

			// ---------- desc ----------
			.mywpdbTable__desc {
				.mywpdbTable__flex {
					@include flex;
					align-items: center;
					justify-content: center;
					min-width: 90px;

					input {
						margin-right: 0.8rem;
					}
				}

				&.-w100 {
					& > * {
						width: 100%;
					}
				}
			}
		}
	}
}

// ---------- サイドバー ----------
.mywpdbSidebar {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 10000;
	max-height: 50vh;
	padding: 0.4rem;
	// width: 30px;
	overflow: scroll;
	background-color: #ffffff;
	border-radius: 16px 0 0 16px;
	transform: translate(calc(100% - 40px), -50%);
	transition: 0.3s;

	&:hover {
		width: auto;
		// transition: 0.3s;
		transform: translate(0, -50%);
		cursor: pointer;
	}

	.mywpdb__form {
		@include flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: flex-start;
	}
}

.-tal {
	text-align: left;
}

// ---------- ページネーション ----------
.mywpdbPagination {
	@include flex;
	align-items: center;
	margin-top: 1.6rem;

	.mywpdbPagination__select {
		margin-right: 2.4rem;
	}

	.mywpdbPagination__list {
		@include flex;
		max-width: 300px;
		overflow-x: scroll;

		&::-webkit-scrollbar {
			// width: 7px;
			display: none;
		}

		&::-webkit-scrollbar-track {
			border: none;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: none;
			box-shadow: none;
			border-radius: 4px;
		}

		.mywpdbPagination__item {
			&.-current {
				.mywpdbPagination__itemButton {
					border-bottom: 1px solid #000000;
				}
			}

			.mywpdbPagination__itemButton {
				padding: 1px 3px;
				margin: 0 3px;
			}
		}
	}
}