/**
 * Shared UI CSS. To minimize the end CSS file, we take only the modules that we use.
 * ALL the styles on every page load.
 */
@import "~@wpmudev/shared-ui/scss/functions";
@import "~@wpmudev/shared-ui/scss/colors";
@import "~@wpmudev/shared-ui/scss/variables";
@import "~@wpmudev/shared-ui/scss/mixins";
@import "~@wpmudev/shared-ui/scss/accessibility";
@import "~@wpmudev/shared-ui/scss/animations";
@import "~@wpmudev/shared-ui/scss/typography";
@import "~@wpmudev/shared-ui/scss/icons";
@import "~@wpmudev/shared-ui/scss/buttons";
@import "~@wpmudev/shared-ui/scss/toggles";
@import "~@wpmudev/shared-ui/scss/boxes";
@import "~@wpmudev/shared-ui/scss/box-settings";
@import "~@wpmudev/shared-ui/scss/layout";
@import "~@wpmudev/shared-ui/scss/notifications";
@import "~@wpmudev/shared-ui/scss/header";
@import "~@wpmudev/shared-ui/scss/summary";
@import "~@wpmudev/shared-ui/scss/list";
@import "~@wpmudev/shared-ui/scss/tooltips";
@import "~@wpmudev/shared-ui/scss/select";
@import "~@wpmudev/shared-ui/scss/tags";
@import "~@wpmudev/shared-ui/scss/forms";
@import "~@wpmudev/shared-ui/scss/radio-checkbox";
@import "~@wpmudev/shared-ui/scss/tabs";
@import "~@wpmudev/shared-ui/scss/sidenav";
@import "~@wpmudev/shared-ui/scss/scores";
@import "~@wpmudev/shared-ui/scss/footer";
@import "~@wpmudev/shared-ui/scss/progress-bars";
@import "~@wpmudev/shared-ui/scss/tables";
@import "~@wpmudev/shared-ui/scss/accordions";
@import "~@wpmudev/shared-ui/scss/code-snippet";
@import "~@wpmudev/shared-ui/scss/modals";
@import "~@wpmudev/shared-ui/scss/listing";
@import "~@wpmudev/shared-ui/scss/select2";
@import "~@wpmudev/shared-ui/scss/utility";
@import "~@wpmudev/shared-ui/scss/wp-admin-notices";
@import "~@wpmudev/shared-ui/scss/recipient";
@import "~@wpmudev/shared-ui/scss/color-accessibility";

/**
 * React related stuff.
 */
@include body-class(true) {
	/* Filename Extensions Icons */
	.wphb-filename-extension {
		border-radius: 4px;
		display: block;
		float: left;
		font-family: $font;
		font-size: 9px;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		line-height: 43px;
		height: 30px;
		margin: 0 10px 0 0;
		width: 30px;

		&.wphb-filename-extension-html {
			background-color: #F56418;
		}

		&.wphb-filename-extension-other {
			background-color: #AAAAAA;
		}

		&.wphb-filename-extension-css {
			background-color: #25A8DE;
		}

		&.wphb-filename-extension-media {
			background-color: #55DDB8;
		}

		&.wphb-filename-extension-images {
			background-color: #BDF2F7;
			color: #333333;
		}

		&.wphb-filename-extension-javascript,
		&.wphb-filename-extension-js {
			background-color: #F7E100;
			color: #333333;
		}
	}

	.box-gzip-settings {
		// Select containers in Configure meta box.
		.select-container {
			max-width: 240px;
		}

		.wphb-listing.wphb-listing-ordered {
			margin: 0;
			padding-left: 20px;

			li {
				margin-top: 0;
				margin-bottom: 0;
				color: #888888;
				font-size: 13px;
				line-height: 22px;

				&:last-child {
					margin-bottom: 10px;
				}
			}
		}
	}

}