$color_1: #23282d;

@import "./common.scss";

#poststuff {
	.inside {
		&:has(.stlms-quiz-settings) {
			padding: 0;
			margin: 0;
		}
		&:has(.stlms-quiz-qus-wrap) {
			padding: 0;
			margin: 0;
		}
	}
}

.stlms-quiz-settings {
	> ul {
		margin: 0;
		> li {
			margin: 0;
			padding: 10px;
			display: flex;
			align-items: center;
			color: $color_1;
			.stlms-setting-label {
				font-size: 12px;
				font-weight: 600;
				width: 180px;
			}
			.stlms-setting-option {
				width: calc(100% - 180px);
				.stlms-setting-number-input {
					width: 60px;
				}
			}
		}
	}
}

.stlms-modal {
	padding: 10px;
	.ui-dialog-titlebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		height: auto;
		padding: 0;
		&:before,
		&:after {
			display: none;
		}
		.ui-dialog-title {
			display: block;
			padding-left: 10px;
		}
		.ui-button.ui-dialog-titlebar-close {
			position: relative;
			flex-shrink: 0;
		}
	}
	.ui-dialog-content {
		padding: 10px 0;
	}
	.stlms-btn-group {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		padding: 10px 0 20px;
	}
}

.stlms-add-qus-modal {
	p {
		margin-top: 0;
	}
}

.stlms-quiz-qus-wrap {
	.stlms-quiz-qus-footer {
		padding: 10px;
	}
}
.stlms-quiz-qus-list {
	margin: 0;
	padding: 0;
	> li {
		padding: 0;
		margin: 0;
	}
}
.stlms-quiz-qus-item {
	&.active & {
		&__header {
			position: sticky;
			top: 24px;
		}
	}
	&__header {
		padding: 20px 10px;
		display: flex;
		align-items: center;
		gap: 20px;
		background: #ffffff;
		border-bottom: 1px solid #dddddd;
		svg {
			display: block;
		}
		.stlms-options-drag {
			flex-shrink: 0;
			cursor: move;
		}
		.stlms-quiz-qus-name {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: #272d31;
			font-weight: 600;
			gap: 8px;
			.stlms-quiz-qus-point {
				font-size: 12px;
				font-weight: 400;
				text-wrap: nowrap;
				margin-left: auto;
				padding-left: 8px;
			}
			.stlms-quiz-qus-draft {
				color:#a53934;
			}
		}
		.stlms-quiz-qus-toggle {
			flex-shrink: 0;
			cursor: pointer;
			svg {
				transition: all 0.3s ease-in-out;
			}
			&.active {
				svg {
					transform: rotate(180deg);
				}
			}
		}
	}
	&__body {
		display: none;
	}
	&__footer {
		border-bottom: 1px solid #dddddd;
		padding: 10px;
		display: flex;
		align-items: center;
		gap: 10px;
		> a {
			display: flex;
			align-items: center;
			text-decoration: none;
			color: #0073aa;
			font-size: 12px;
			font-weight: 600;
			gap: 10px;
			&.stlms-delete-link {
				color: #a53934;
			}
			&:not(:first-child) {
				padding-left: 10px;
				border-left: 1px solid #dddddd;
			}
		}
	}
}

.inline-edit-quiz {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4%;
	row-gap: 15px;
	.inline-edit-quiz-item {
		width: 48%;
		label {
			display: flex;
			align-items: center;
			width: 100%;
			gap: 10px;
			margin: 0;
			.title {
				width: 40% !important;
				float: none;
			}
			input,
			select {
				width: 60%;
			}
			ul.cat-checklist {
				width: 60%;
				background: #ffffff;
				height: 9em;
				input {
					width: 16px;
				}
			}
		}
	}
}

.stlms-add-accepted-answers {
	padding: 0;
	h3 {
		padding: 0 10px;
	}
	ul {
		padding: 10px;
	}
}
.stlms-answer-type {
	label {
		font-size: 14px;
	}
}
.stlms-qus-setting-body {
	.stlms-add-option {
		border-top: 0;
		padding: 0;
		span.spinner {
			float: none;
		}
	}
}
.stlms-quiz-name {
	border-bottom: 1px solid #dddddd;
	padding: 10px;
	input {
		width: 100%;
	}
}

#quiz-questions {
	.postbox-header {
		.add-new-question {
			margin-right: 20px;
		}
	}
}