$prefix: 'wpmudev-videos';

// Overwrite font path.
$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';
$sui-image-path: '~@wpmudev/shared-ui/dist/images/';

// Share UI styles.
@import '~@wpmudev/shared-ui/scss/shared-ui';

@include body-class(true) {

	#user-permissions {

		.sui-description {
			margin: 0 0 10px;
		}

		.sui-form-field {
			margin: 0;

			.sui-checkbox {

				@include media(min-width, md) {
					flex: 0 0 50%;
					margin: 0 0 10px;
				}
			}

			@include media(min-width, md) {
				display: flex;
				flex-flow: row wrap;
				margin-bottom: -10px;
			}
		}
	}

	#import-configs {

		> .sui-description {
			margin: 0 0 10px;
		}

		.sui-form-field {
			margin: 0;

			.#{$prefix}-upload-import {
				display: flex;
				flex-flow: row wrap;
				margin: 0 0 10px;

				> .sui-upload {
					flex: 0 0 auto;

					+ .sui-button {
						margin-left: 10px;
					}
				}

				> .sui-button {
					flex: 0 1 auto;
				}
			}
		}
	}

	#export-configs {

		.sui-settings-label {
			margin: 0 0 10px;
		}

		.sui-border-frame {
			margin: 0 0 10px;
		}

		.#{$prefix}-export-options {

			p.sui-label,
			label.sui-label {
				color: #333;
				font-size: 13px;
				line-height: 22px;
			}

			.sui-description {
				margin: 0 0 10px !important;
			}

			div[role="group"] {

				.sui-checkbox {

					&.sui-checkbox-stacked {

						@include media(min-width, md) {
							width: 100%;
							flex: 0 0 auto;
							margin: 0 0 10px;
						}
					}

					&:not(.sui-checkbox-stacked) {

						@include media(min-width, md) {
							width: 50%;
							flex: 0 0 auto;
							margin: 0 0 10px;
							padding-left: 26px;
						}
					}
				}

				@include media(min-width, md) {
					display: flex;
					flex-flow: row wrap;
				}
			}

			&:not(:last-child) {
				border-bottom: 1px solid #E6E6E6;

				@include media(max-width, md) {
					margin-right: -#{$sui-gutter-md};
					margin-left: -#{$sui-gutter-md};
					padding: 0 $sui-gutter-md $sui-gutter-md;
				}

				@include media(min-width, md) {
					margin-right: -#{$sui-gutter};
					margin-left: -#{$sui-gutter};
					padding: 0 $sui-gutter #{$sui-gutter - 10px};
				}
			}
		}
	}

	##{$prefix}-import-confirmation {

		.sui-border-frame {
			margin-top: 0;

			.sui-form-field {

				.sui-checkbox {
					display: flex;

					&.sui-checkbox-stacked {

						@include media(min-width, md) {
							flex: 0 0 100%;
							margin: 0 0 10px;
						}
					}

					&:not(.sui-checkbox-stacked) {
						padding-left: 26px;

						@include media(min-width, md) {
							flex: 0 0 50%;
							margin: 0 0 10px;
						}
					}
				}

				@include media(min-width, md) {
					display: flex;
					flex-flow: row wrap;
				}
			}

			@include media(min-width, md) {
				padding-bottom: 20px;
			}
		}

		.sui-toggle {

			.sui-toggle-label {
				font-size: 13px;

				.sui-tooltip {
					vertical-align: middle;
					margin-left: 5px;
				}
			}
		}
	}
}