@import './_helper/helper-css.less';

// Userplace Menu Structure
.rq-userplace-custom-field {
	h4.field-title {
		font-size: 12px;
		margin: 10px 0 8px;
	}

	.rq-userplace-restricted-roles-area {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: auto auto auto;
		grid-template-columns: auto auto auto;
		grid-gap: 10px;
		max-height: 240px;
		overflow-y: auto;
		overflow-x: hidden;

		p {
			margin: 0;
		}
	}
}

// Userplace Settings
.userplaceSettingsBar {
	width: calc(~'100% - 30px');
	height: auto;
	margin: 30px 15px;
	box-sizing: border-box;

	h1 {
		padding: 0;
		margin: 0 0 10px;
		font-size: 23px;
		font-weight: 400;
	}

	#userplace_settings,
	#userplace_payment_settings {
		padding: 15px 0 75px;

		.scwp-pageSettings-wrapper {
			margin-top: 0;
		}

		button.up-userplace-btn {
			.up-userplace-btn(@padding: 15px 65px; @bgc: @active-blue-color);
			margin-top: 15px;
			border: 0;
			float: right;
			cursor: pointer;
			.transition();

			&:focus,
			&:hover {
				outline: 0;
				background-color: rgba(0, 135, 214, 0.8);
			}
		}
	}
}

// page setting
.scwp-pageSettings-wrapper {
	width: 100%;
	.display-flex();
	margin-top: 30px;
	min-height: 600px;

	.scwp-tab-menu-wrapper {
		width: 260px;
		.display-flex();
		.flex-column();
		.flex-shrink-0();
		padding: 0;
		background-color: @primary-color;
		border: 1px solid @primary-color;
		border-right: 0;

		.scwp-tab-menu-button {
			width: 100%;
			.display-flex();
			.flex-item-center();
			line-height: 45px;
			margin: 0;
			padding: 3px 15px;
			outline: 0;
			border: 0;
			margin-bottom: 1px;
			background-color: rgba(248, 248, 248, 0.05);
			color: @white;
			font-size: 14px;
			font-weight: 600;
			position: relative;
			.font-smoothing();

			&:last-of-type {
				margin-bottom: 0;
			}

			&.active {
				background-color: @active-blue-color;

				&:after {
					display: block;
					content: '';
					border-color: transparent transparent transparent @active-blue-color;
					border-style: solid;
					border-width: 14px 0 14px 13px;
					bottom: 0;
					content: '';
					height: 0;
					position: absolute;
					width: 28px;
					z-index: 9;
					top: 24%;
					right: -26px;
				}
			}
		}
	}

	.reuseFormWrapper___ {
		padding: 30px;
		border: 1px solid @primary-color;
		background-color: @white;
		border-left: 0;
		width: 100%;

		button.reuseButton___ {
			background-color: @primary-color;

			&:hover,
			&:focus {
				outline: none;
				background-color: rgba(45, 52, 70, 0.85);
			}
		}

		.reuseSingleElement___ {
			.reuseElementBlock___ {
				// switch field
				.switch {
					.switch-toggle {
						.reuseToggleOnState___ {
							&.reuseToggleAltWrapper___ {
								background-color: @primary-color;
								border: 1px solid @primary-color;

								span {
									color: @primary-color;
								}
							}
						}
					}
				}
			}
		}
	}
}

#userplace_role_capabilities {
	.reuseFormWrapper___ {
		.reuseSingleElement___ {
			.reuseElementBlock___ {
				// check box  field
				.reuseCheckboxParrentWrapper___ {
					margin: 0 0 0 -10px;

					.reuseCheckboxWrapper___ {
						.reuseCheckboxField___ {
							width: 100%;

							.reuseCheckbox___ + label {
								width: 100%;
								word-wrap: break-word;
								.flex-item-center();

								span {
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
}

// copy clipboard style
pre.scwp-snippet {
	.display-flex();
	.flex-item-center();
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, 0.07);

	code {
		&.js.hljs.javascript {
			background-color: transparent;
		}
	}

	.scwp-clippy-icon {
		padding: 4px 6px;
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
		.transition();
		background-color: #ededed;
		top: 3px;
		right: 4px;
	}

	&:hover {
		.scwp-clippy-icon {
			visibility: visible;
			opacity: 1;
		}
	}
}