/**
 * Dark Mode CSS
 */

/** 
 * The colours below are loosely based on the WordPress branding colours.
 * https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
 */
$white:           #ffffff;
$black:           #000000;
$blue:            #0073aa;
$clear:           transparent;
$medium-blue:     #00a0d2;
$accent-red:      #DC3232;
$accent-orange:   #F56E28;
$accent-yellow:   #FFB900;
$accent-green:    #46B450;
$accent-blue:     $blue;
$accent-purple:   #826EB4;

$base-grey:       #23282d;
$light-grey:      #bbc8d4;
$heavy-grey:      #37444c;
$dark-grey:       #32373c;
$ultra-grey:      #191f25;
$dark-silver:     #50626f;
$base-blue:       #2e74aa;
$light-blue:      #4092d2;
$dark-blue:       #2c5f88;
$ultra-blue:      #1f3f58;
$bright-blue:     #30ceff;

$editor-lavender: #c678dd;
$editor-sunglo:   #e06c75;
$editor-olivine:  #98c379;

body {

	background-color: $base-grey;
	color: $light-grey;

	#wpbody,
	#wpfooter {

		background-color: $base-grey;
		color: $light-grey;

		p,
		code,
		kbd,
		label,
		.form-table th,
		.form-wrap label,
		.form-wrap p,
		p.description,
		.importer-title,
		.menu-in-location,
		.theme-location-set {

			color: $light-grey;

		}

		#wpadminbar {

			* {

				color: inherit !important;

			}

		}

		table {

			background-color: $ultra-grey;
			border-color: $dark-grey;

			p {

				color: $light-grey;

			}

			tr {

				background-color: $base-grey;

				th,
				td {

					background-color: transparent;
					color: $light-grey;

				}

			}

			&.widefat {

				border-color: $dark-grey;

				thead,
				tfoot {

					th,
					td {

						border-top-color: $ultra-grey;
						border-bottom-color: $base-grey;
						color: $light-grey;

					}

				}

				p {

					color: $light-grey;

				}

			}

			&.striped {

				tbody {

					tr {

						background-color: $dark-grey;

						&:nth-child(odd) {

							background-color: $base-grey;

						}

					}

				}

			}

			&.plugins {

				.active td,
				.active th {

					background-color: $ultra-grey;

				}

				tr.active+tr.inactive td,
				tr.active+tr.inactive th,
				tr.active.plugin-update-tr+tr.inactive td,
				tr.active.plugin-update-tr+tr.inactive th {

					box-shadow: inset 0 1px 0 rgba(0,0,0,.02), inset 0 -1px 0 $base-grey;

				}

			}

			&.wp-list-table {

				tr {

					background-color: $dark-grey;

					th, td {

						color: $light-grey;

						*::before,
						*::after {

							color: $light-grey;

						}

					}

				}

			}

			&.updates-table {

				tr {

					background-color: $dark-grey;

				}

			}

		}

		.tablenav {

			p,
			span {

				color: $light-grey;

			}

		}

		.subsubsub,
		.subsubsub li {

			color: $light-grey;

			a {

				color: $bright-blue;

				span.count,
				&.current span.count {

					color: $light-grey;

				}

			}

			a.current {

				color: $white;

			}

		}

		.tablenav {

			.tablenav-pages-navspan {

				background: $base-grey;
				border-color: $ultra-grey;
				color: $light-grey;

			}

			.tablenav-pages a {

				background: $dark-silver;
				border: 1px solid $base-grey;

				span {

					color: $white;

				}

				&:hover {

					background: $medium-blue;
					border-color: $base-grey;

				}

			}

		}

		.notice,
		.error,
		.updated,
		.update-nag {

			background-color: $ultra-grey;

		}

		.notice p,
		.updated p,
		.fileedit-sub,
		.about-wrap h1,
		.about-wrap .about-text,
		#bulk-titles div a:before,
		.notice-dismiss:before,
		.tagchecklist .ntdelbutton .remove-tag-icon:before,
		.welcome-panel .welcome-panel-close:before,
		.pressthis-js-toggle .dashicons,
		.try-gutenberg-panel p,
		.try-gutenberg-panel-column p.about-description,
		.howto,
		.item-type,
		.is-submenu,
		.nonessential,
		#future-posts ul span,
		#published-posts ul span,
		#dashboard-widgets h3,
		#dashboard-widgets h4,
		#dashboard_quick_press .drafts h2,
		#dashboard_right_now li a:before,
		#dashboard_right_now li span:before,
		.welcome-panel .welcome-icon:before,
		.community-events li,
		#dashboard_activity .subsubsub a .count,
		#dashboard_activity .subsubsub a.current .count,
		#latest-comments #the-comment-list .comment-meta,
		#dashboard_quick_press .drafts li time,
		#title-wrap #title-prompt-text,
		.textarea-wrap #content-prompt-text,
		#post-body ul.add-menu-item-tabs li.tabs a,
		#post-body ul.category-tabs li.tabs a,
		#side-sortables .add-menu-item-tabs .tabs a,
		#side-sortables .category-tabs .tabs a,
		.wp-tab-bar .wp-tab-active a,
		.link-to-original,
		.accordion-section-title:after,
		.handlediv,
		.item-edit,
		.postbox .handlediv.button-link,
		.sidebar-name-arrow,
		.edit-comment-author,
		#comment-link-box,
		#edit-slug-box,
		.inactive-sidebar .description,
		.widget-holder .description,
		#available-widgets .widget-description,
		#widgets-right a.widget-control-edit,
		.in-widget-title,
		.edit-attachment-frame .attachment-info .filename,
		.attachment-details .setting span,
		.compat-item label span,
		.media-sidebar .setting span,
		.upload-plugin .install-help,
		.upload-theme .install-help,
		.subtitle {

			color: $light-grey;

		}

		.spinner {

			background-color: $white;
			border: 1px solid $white;
			border-radius: 100%;

		}

		code,
		kbd {

			background-color: rgba(0, 0, 0, 0.25);

		}

		ul#adminmenu a.wp-has-current-submenu:after,
		ul#adminmenu>li.current>a.current:after {

			border-right-color: $base-grey;

		}

		#activity-widget #the-comment-list .comment,
		#activity-widget #the-comment-list .pingback {

			-webkit-box-shadow: inset 0 1px 0 rgb(35, 41, 47);
			box-shadow: inset 0 1px 0 rgb(35, 40, 46);

		}

		#templateside {

			> ul {

				background-color: $base-grey;
				border-color: $dark-grey;

				li {

					a,
					span {

						background-color: $clear;

						&.hover,
						&:hover {

							background-color: $dark-grey;
							color: $light-grey;

						}

					}

				}

			}

		}

		.upload-plugin .wp-upload-form,
		.upload-theme .wp-upload-form,
		#screen-meta,
		#contextual-help-link-wrap,
		#screen-options-link-wrap,
		.quicktags-toolbar,
		.attachment-media-view,
		.media-widget-preview.media_audio,
		.media-widget-preview.media_image {

			background-color: $dark-grey;
			border-color: $ultra-grey;

		}

		#show-settings-link,
		#contextual-help-link {

			box-shadow: none;

		}

		#contextual-help-link-wrap,
		#screen-options-link-wrap {

			color: $light-grey;

			button {

				background-color: $dark-grey;
				border-color: $ultra-grey;
				color: $light-grey;

				&::after {

					color: $light-grey;

				}

				&:hover {

					background-color: $dark-grey;
					border-color: $ultra-grey;
					color: $white;

					&::after {

						color: $white;

					}

				}

			}

		}

		#wpwrap,
		#contextual-help-back,
		#plugin-information-content,
		.notification-dialog {

			background-color: $base-grey;
			border-color: $ultra-grey;

		}

		.widgets-holder-wrap {

			background-color: $base-grey;
			border-color: $clear;

			.sidebar-name {

				&:hover {

					button {

						span {

							color: $white;

						}

					}

				}

			}

			.widgets-sortables {

				background-color: $base-grey;

			}

		}

		#widgets-left,
		#widgets-right {

			.widget {

				.widget-top {

					&:hover {

						border-color: $dark-grey;

					}

					.widget-control-edit {

						background-color: $dark-grey;
						border-left-color: $clear;
						color: $light-grey;

						&:hover {

							background-color: $dark-silver;
							border-left-color: $clear;
							color: $white;

						}

					}

				}

				ul.widgets-chooser-sidebars {

					border-color: $ultra-grey;

					li {

						background-color: $dark-grey;
						border-color: $base-grey;
						color: $light-grey;

						&.widgets-chooser-selected {

							background-color: $accent-blue;
							color: $white;

						}

						&:hover {

							background-color: $ultra-grey;
							color: $white;

						}

					}

				}

			}

		}

		.contextual-help-tabs {

			.active a {

				background-color: $base-grey;
				border-color: $dark-grey;
				color: $light-grey;

			}

			a:hover {

				color: $white;

			}

		}

		#screen-meta-links .show-settings:active,
		#screen-meta-links .show-settings:focus,
		#screen-meta-links .show-settings:hover,
		#contextual-help-wrap h5,
		#screen-options-wrap h5,
		#screen-options-wrap legend,
		#screen-meta-links .show-settings {

			color: $light-grey;

			&:hover {

				color: $white;

				&::before,
				&::after {

					color: $white;

				}

			}

		}

		.try-gutenberg-panel,
		.welcome-panel,
		.postbox,
		.card,
		.stuffbox,
		#activity-widget #the-comment-list .comment-item,
		.community-events ul,
		.wp-filter,
		.menu-edit #post-body {

			background-color: $dark-grey;
			border-color: $ultra-grey;
			color: $light-grey;

			p,
			span {

				color: $light-grey;

			}

		}

		.card {

			table,
			thead,
			tbody,
			tfoot,
			tr,
			th,
			td {

				background-color: $clear;

			}

		}

		.try-gutenberg-panel img,
		.activity-block,
		#dashboard_activity .subsubsub,
		#dashboard_right_now .sub,
		.community-events li:first-child,
		.community-events li~li,
		.community-events-footer,
		.community-events .activity-block.last {

			border-color: $base-grey;

		}

		.pressthis-bookmarklet span {

			color: $base-grey;

		}

		.color-option.selected,
		.color-option:hover,
		.accordion-section-content,
		.filter-drawer,
		.wp-filter .favorites-form,
		.filter-group,
		.filtered-by .tag {

			background-color: $dark-grey;
			border-color: $ultra-grey;

		}

		.plugin-card {

			background-color: $dark-grey;

			p,
			.column-compatibility span:before {

				color: $light-grey;

			}

		}

		.plugin-card-bottom,
		.notice-warning.notice-alt,
		#the-comment-list .unapproved td,
		#the-comment-list .unapproved th,
		#the-comment-list div.undo,
		#the-comment-list tr.undo {

			background-color: $ultra-grey;

		}

		.plugin-card,
		.plugin-card-bottom,
		#nav-menu-header,
		#menu-management .menu-edit,
		.wp-editor-container {

			border-color: $ultra-grey;

		}

		.wp-filter .button.drawer-toggle {

			&,
			&::before {

				color: $light-grey;

			}

			&:hover,
			&:focus,
			&:active {

				&,
				&::before {

					color: $white;

				}

			}

		}

		.filter-links li a {

			border-color: $dark-grey;
			color: $light-grey;

			&.current {

				border-color: $light-grey;
				color: $light-grey;

			}

		}

		.control-section .accordion-section-title,
		.customize-pane-child .accordion-section-title,
		&.js .control-section .accordion-section-title:focus,
		&.js .control-section .accordion-section-title:hover,
		&.js .control-section.open .accordion-section-title,
		&.js .control-section:hover .accordion-section-title {

			background-color: $ultra-grey;
			border-color: $base-grey;
			color: $light-grey;

		}

		#dashboard_right_now .sub,
		.wp-tab-active,
		ul.add-menu-item-tabs li.tabs,
		ul.category-tabs li.tabs,
		.categorydiv div.tabs-panel,
		.customlinkdiv div.tabs-panel,
		.posttypediv div.tabs-panel,
		.taxonomydiv div.tabs-panel,
		.wp-tab-panel {

			background-color: $base-grey;
			border-color: $dark-grey;

		}

		.wp-editor-expand #wp-content-editor-tools,
		#wp-content-editor-tools {

			background-color: $base-grey;
			border-color: $dark-grey;

		}

		.accordion-section,
		.accordion-section.open:hover,
		#menu-management .menu-edit,
		#menu-settings-column .accordion-container,
		.comment-ays,
		.feature-filter,
		.imgedit-group,
		.manage-menus,
		.menu-item-handle,
		.popular-tags,
		.stuffbox,
		.widget-inside,
		.widget-top,
		p.popular-tags,
		.postbox .hndle,
		.stuffbox .hndle,
		.widgets-chooser ul {

			border-color: $base-grey;

		}

		#major-publishing-actions,
		.menu-item-settings,
		.link-to-original,
		&.nav-menus-php #post-body {

			background: $dark-grey;
			border-color: $base-grey;

		}

		.accordion-section-title:hover:after,
		.handlediv:focus,
		.handlediv:hover,
		.item-edit:focus,
		.item-edit:hover,
		.postbox .handlediv.button-link:focus,
		.postbox .handlediv.button-link:hover,
		.sidebar-name:hover .sidebar-name-arrow,
		.widget-action:focus,
		.widget-top:hover .widget-action {

			color: $white;

		}

		.menu-item-handle,
		.widget .widget-top,
		.widget-inside,
		.manage-menus,
		#menu-management {

			background: $ultra-grey;
			border-color: $dark-grey;

		}

		.menu-item-bar .menu-item-handle {

			&,
			&:hover {

				border-color: $base-grey;

			}

		}

		.wp-editor-container,
		.wp-editor-expand #post-status-info {

			border-color: $dark-grey;

		}

		.nav-tab-wrapper,
		.wrap h2.nav-tab-wrapper,
		h1.nav-tab-wrapper {

			border-color: $light-grey;

		}

		.nav-tab {

			background-color: $dark-grey;
			border-color: $ultra-grey;
			color: $light-grey;

			&:focus,
			&:hover {

				background-color: $ultra-grey;

			}

		}

		.nav-tab-active,
		.nav-tab-active:focus,
		.nav-tab-active:focus:active,
		.nav-tab-active:hover,
		.about-wrap h2 .nav-tab-active,
		.media-modal-content {

			background-color: $light-grey;
			border-color: $light-grey;
			color: $ultra-grey;

		}

		.media-frame-content,
		.edit-attachment-frame .attachment-info {

			background-color: $base-grey;
			border-color: $dark-grey;
			color: $light-grey;

		}

		.edit-attachment-frame .edit-media-header .left,
		.edit-attachment-frame .edit-media-header .right,
		&.upload-php .media-modal-close {

			border-color: $base-grey;

		}

		#template textarea {

			background: $ultra-grey;
			border-color: $dark-grey;
			color: $light-grey;

		}

		#templateside .highlight {

			background: $dark-grey;
			color: $light-grey;

		}

		.theme-overlay {

			.theme-backdrop,
			.theme-wrap {

				background: $base-grey;

			}

			.screenshot {

				border-color: $ultra-grey;

			}

			.current-label {

				background: $dark-grey;

			}

			.theme-name,
			.theme-version,
			.theme-author,
			.theme-description {

				color: $light-grey;

			}

			.theme-tags {

				border-color: $ultra-grey;
				color: $light-grey;

				span {

					color: $white;

				}

			}

			.theme-header {

				&,
				.close,
				.left,
				.right {

					border-color: $ultra-grey;

					&:before {

						color: $light-grey;

					}

					&:hover {

						&::before {

							color: $black;

						}

					}

					&.disabled {

						&::before {

							color: $light-grey;

						}

					}

				}

			}

			.theme-actions {

				background-color: $dark-grey;
				border-color: $ultra-grey;

			}

		}

		.theme-browser .theme {

			border-color: $ultra-grey;

			&.active .theme-name,
			&.add-new-theme a:focus,
			&.add-new-theme a:hover {

				&::after {

					background-color: $dark-grey;

				}

			}

			.theme-name,
			.theme-actions,
			.theme-screenshot {

				background-color: $dark-grey;

			}

		}

		#the-comment-list .approve a {

			color: $accent-green;

		}

	}

	#wp-link {

		h1 {

			background-color: $base-grey;
			border-color: $ultra-grey;
			color: $light-grey;

		}

		#link-selector {

			background-color: $dark-grey;

			.howto {

				color: $light-grey;

			}

			.query-results {

				background-color: $dark-grey;
				border-color: $ultra-grey;

			}

			.query-notice {

				border-bottom-color: $ultra-grey;

				.query-notice-default,
				.query-notice-hint {

					background-color: $dark-grey;
					color: $white;

				}

			}

			ul {

				li {

					background-color: $dark-grey;
					border-color: $ultra-grey;
					color: $light-grey;

					span {

						color: $light-grey;

					}

					&.selected,
					&:hover,
					&:focus {

						background-color: $base-grey;
						color: $white;

					}

				}

			}

		}

		.submitbox {

			background-color: $base-grey;
			border-color: $ultra-grey;

		}

	}

	div.mce-inline-toolbar-grp {

		.wp-link-preview {

			a {

				color: $bright-blue;

				&:hover,
				&:focus {

					color: $blue;

				}

			}

		}

		&.mce-arrow-up {

			&::before {

				border-bottom-color: $ultra-grey;

			}

			&::after {

				border-bottom-color: $dark-grey;

			}

		}

	}

	&.wp-customizer {

		#screen-options-wrap {

			background-color: $ultra-grey;
			border-color: $base-grey;

		}

		.menu-item-settings,
		.menu-item-bar .menu-item-handle {

			background-color: $base-grey;
			border-color: $ultra-grey;
			color: $light-grey;

		}

	}

	#plugin-information-scrollable {

		#plugin-information-tabs {

			background-color: $ultra-grey;
			border-color: $dark-grey;

			a.current {

				background-color: $base-grey;
				border-color: $dark-grey;
				border-bottom-color: $base-grey;
				color: $light-grey;

			}

		}

		#plugin-information-content {

			background-color: $base-grey;

			.wrap {

				background-color: $base-grey;

			}

			.fyi {

				background: $ultra-grey;
				border-color: $dark-grey;
				color: $light-grey;

				.counter-back {

					background: $light-grey;

				}

				h3, strong {

					color: $light-grey !important;

				}

			}

		}

	}

	#plugin-information-footer {

		background: $ultra-grey !important;
		border-color: $dark-grey !important;

	}

	#customize-controls {

		border-color: $base-grey;

		.cannot-expand:hover .accordion-section-title,
		.panel-meta.customize-info .accordion-section-title:hover,
		.customize-info .customize-panel-description,
		.customize-info .customize-section-description,
		.no-widget-areas-rendered-notice,
		#customize-outer-theme-controls .customize-info .customize-section-description {

			background-color: $base-grey;
			border-color: $ultra-grey;
			color: $light-grey;

		}

		.control-section .accordion-section-title:focus .menu-in-location,
		.control-section .accordion-section-title:hover .menu-in-location,
		.theme-location-set {

			color: $light-grey;

		}

		#customize-sidebar-outer-content {

			border-color: $dark-grey;

		}

		.customize-panel-back,
		.customize-section-back {

			background-color: $base-grey;
			border-color: transparent;
			color: $light-grey;

		}

		#customize-theme-controls {

			.accordion-section-content,
			.description {

				color: $light-grey;

			}

			.control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
			.control-panel-nav_menus .control-section-nav_menu,
			.control-section-nav_menu_locations .accordion-section-title,
			#accordion-section-menu_locations > .accordion-section-title,
			.control-section:last-of-type.open,
			.control-section:last-of-type > .accordion-section-title,
			.control-section.open {

				border-color: $ultra-grey;

			}

		}

		.control-section .accordion-section-title:focus,
		.control-section .accordion-section-title:hover,
		.control-section.open .accordion-section-title,
		.control-section:hover > .accordion-section-title {

			&::after {

				color: $light-grey;

			}

			background-color: $ultra-grey;
			border-color: $dark-grey;
			color: $light-grey;

		}

		.accordion-section-title,
		.customize-section-title {

			background-color: $base-grey;
			border-color: $ultra-grey;
			color: $light-grey;

			&:hover {

				background-color: $base-grey;

			}

			h3 {

				color: $light-grey;

			}

		}

		.customize-info {

			border-color: $dark-grey;

			.customize-help-toggle {

				color: $light-grey;

			}

			.accordion-section-title,
			.customize-panel-description {

				background-color: $base-grey;
				border-color: $dark-grey;
				color: $light-grey;

			}

		}

		#customize-theme-controls {

			.control-panel-themes > .accordion-section-title {

				background-color: $base-grey;
				border-color: $ultra-grey;
				color: $light-grey;

			}

		}

		#customize-header-actions,
		.customize-controls-close {

			background-color: $base-grey;
			border-color: $base-grey;
			color: $light-grey;

		}

		.wp-full-overlay-footer {

			background-color: $ultra-grey;
			border-color: $base-grey;
			color: $light-grey;

			.devices {

				box-shadow: none;

			}

		}

		.customize-controls-close {

			border-color: transparent;
			color: $light-grey;

			&:hover {

				color: $white;

			}

		}

		.wp-full-overlay-sidebar-content {

			background-color: $dark-grey;

		}

		.collapse-sidebar-arrow {

			&::before {

				color: $dark-grey;

			}

		}

		.collapse-sidebar {

			span {

				color: $light-grey;

			}

		}

	}

	.media-modal {

		button.media-modal-close {

			background-color: $ultra-grey;
			border-color: $dark-silver;

			&:hover {

				background-color: $dark-silver;
				border-color: $dark-silver;

				span {

					&::before {

						color: $ultra-grey;

					}

				}

			}

			span {

				&::before {

					color: $light-grey;

				}

			}

		}

		.media-menu {

			background: $ultra-grey;
			border-color: $ultra-grey;

			a {

				color: $light-blue;

				&:hover {

					color: $blue;

				}

			}

			.separator {

				border-color: $light-grey;

			}

			.active,
			.active:hover {

				color: $white;

			}

		}

		.media-router {

			a {

				color: $light-blue;

				&:hover {

					color: $blue;

				}

			}

			.active {

				color: $white;
				background: $dark-silver;
				border-color: $ultra-grey;

			}
		}

		.media-sidebar {

			background: $ultra-grey;
			border-color: $white;
			border-left-color: $ultra-grey;
			
			.setting span {

				color: $light-grey;
				
			}

			h2 {

				color: $white;

			}

			.attachment-info {

				border-color: $white;

				.details {

					color: $light-grey;

				}

				.filename {

					color: $white;

				}
			}
		}

		.media-selection {

			&:after {

				background-image: none;

			}

		}

		&-content {

			background-color: $base-grey;
			border-color: $ultra-grey;

			.media-frame {

				&-title,
				&-content {

					background-color: $base-grey;
					border-color: $ultra-grey;
					color: $light-grey;

					h1 {

						color: $light-grey;

					}

				}

				&-content {

					.setting {

						span {

							color: $light-grey;

						}

					}

					.upload-ui {

						h2,
						p {

							color: $light-grey;

						}

					}

				}

				&-toolbar {

					.media-toolbar {

						border-color: $ultra-grey;

					}

				}

				&.hide-router {

					.media-frame {

						&-title {

							border-bottom: none;

						}

					}

				}

			}

			.imgedit-wrap {

				.imgedit-settings {

					background-color: $ultra-grey;
					border-color: $dark-silver;

					h2 {

						color: $white;

					}

				}

			}

			.edit-media-header {

				background-color: $ultra-grey;

				button {

					background-color: $ultra-grey;

					&::before {

						color: $light-grey;

					}

				}

			}

			.attachment-media-view {

				background-color: $dark-grey;

			}

			.edit-attachment-frame {

				.edit-media-header {

					.left,
					.right {

						background-color: $ultra-grey;
						border-color: $dark-silver;

					}

				}

				.attachment-info {

					background-color: $ultra-grey;
					border-color: $dark-silver;
					color: $light-grey;

					span,
					.filename {

						color: $light-grey;

					}

				}

			}

		}

		.wp-core-ui {
			
			.attachment-preview {

				background: $heavy-grey;
				box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.2 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );

			}

			.attachment.selected {

				box-shadow: inset 0 0 0 5px $dark-silver, inset 0 0 0 7px #ccc;

			}

			.attachment:focus,
			.attachment.details {

				box-shadow: inset 0 0 2px 3px $dark-silver, inset 0 0 0 7px $light-blue;

			}
			
		}

		.embed-url {

			background: $dark-silver;

		}

	}

	#file-editor-warning {

		background-color: $base-grey;
		color: $light-grey;

	}

	#adminmenu a.wp-has-current-submenu:after,
	#adminmenu > li.current > a.current:after {

		border-right-color: $base-grey;

	}

	.notice,
	.error,
	.updated {

		background-color: $ultra-grey;

	}

	.wp-editor-tabs {

		button {

			background-color: $dark-silver;
			border-color: $ultra-grey;
			border-bottom: none;
			color: $light-grey;

			&:hover,
			&:focus {

				background-color: $dark-grey;
				border-color: $dark-grey;
				color: $white;

			}

		}

	}

	.html-active {

		.wp-editor-tabs {

			button.switch-html {

				background-color: $dark-grey;
				border-color: $dark-grey;
				color: $white;

			}

		}

	}

	.tmce-active {

		.wp-editor-tabs {

			button.switch-tmce {

				background-color: $dark-grey;
				border-color: $dark-grey;
				color: $white;

			}

		}

	}

	div.mce {

		&-toolbar {

			&-grp {

				background-color: $dark-grey;
				border-color: $ultra-grey;
				color: $light-grey;

			}

			.mce-btn-group {

				.mce-btn {

					background: $clear;
					border-color: $clear;

					i {

						color: $light-grey;

					}

					&.mce-disabled {

						&:hover,
						&:focus {

							border-color: $ultra-grey;

						}

					}

					&.mce-listbox {

						background-color: $base-grey;
						border-color: $ultra-grey;

						span {

							color: $light-grey;

						}

						i {

							border-top-color: $light-grey;

						}

						&.mce-active,
						&:hover,
						&:focus {

							background-color: $dark-grey;
							border-color: $ultra-grey;

							span {

								color: $white;

							}

							i {

								border-top-color: $light-grey;

							}

						}

						&.mce-active {

							i {

								border-bottom-color: $light-grey;

							}

						}

					}

					&.mce-active,
					&:hover,
					&:focus {

						background: $base-grey;
						border-color: $ultra-grey;
						box-shadow: none;

						i {

							color: $white;

						}

					}

				}

			}

		}

		&-panel {

			background: $dark-grey;

			&.mce-menu {

				border-color: $ultra-grey;

			}

			.mce-menu-item {

				.mce-ico,
				.mce-text {

					color: $light-grey;

				}

				&.mce-active,
				&.mce-selected,
				&:focus,
				&:hover {

					background-color: $blue;

					.mce-ico,
					.mce-text {

						color: $white;

					}

				}

			}

		}

	}

	.CodeMirror {

		background-color: $ultra-grey;
		border-color: $ultra-grey;
		color: $light-grey;

		&-gutter {

			background-color: $base-grey;
			border-color: $ultra-grey;

			&s {

				border-color: $base-grey;

			}

		}

		&-activeline-background {

			background-color: $dark-grey;

		}

		&-linenumber {

			color: $light-grey;

		}

		&-code {

			.cm {

				&-tag,
				&-builtin,
				&-qualifier {

					color: $accent-green;

				}

				&-property {

					color: $light-blue;

				}

				&-number {

					color: $accent-purple;

				}

				&-error	{

					color: $accent-red;

				}

				&-atom {

					color: $accent-yellow;

				}

				&-comment {

					color: $light-grey;

				}

				&-keyword {

					color: $editor-lavender;

				}

				&-def {

					color: $medium-blue;

				}

				&-variable_1,
				&-variable_2 {

					color: $editor-sunglo;

				}

				&-string {

					color: $editor-olivine;

				}

			}

		}

	}

	h1, h2, h3, h4, h5, h6 {

		color: $light-grey;

	}

	.button,
	.button-secondary,
	&.wp-core-ui .button,
	&.wp-core-ui .button-secondary {

		background: $dark-silver;
		border-color: $dark-grey;
		box-shadow: 0 1px 0 $ultra-grey;
		color: $white;
		text-decoration: none;

		span {

			&,
			&::before {

				color: $white;

			}

		}

		&:hover,
		&:focus,
		&:active {

			background: $heavy-grey;
			border-color: $dark-grey;
			color: $white;

		}

		&:active {

			background: $dark-grey;
			border-color: $ultra-grey;

		}

		&.active {

			background: $dark-grey;
			border-color: $ultra-grey;

			&:hover {

				background: $heavy-grey;
				border-color: $ultra-grey;

			}

		}

	}

	.button-primary,
	.page-title-action {

		&.button-hero {

			box-shadow: 0 2px 0 $ultra-blue !important;

			&.active,
			&:active {

				box-shadow: inset 0 3px 0 $base-blue !important;

			}

		}

		background: $light-blue;
		border-color: $dark-blue $dark-grey $dark-grey;
		color: $white;
		box-shadow: 0 1px 0 $ultra-grey;
		text-shadow: 0 -1px 1px $dark-grey, 1px 0 1px $dark-grey, 0 1px 1px $dark-grey, -1px 0 1px $dark-grey;

		&:hover,
		&:focus,
		&:active {

			background: $base-blue;
			border-color: $dark-blue $dark-grey $dark-grey;
			color: $white;
			box-shadow: 0 1px 0 $ultra-grey;
			text-shadow: 0 -1px 1px $dark-grey, 1px 0 1px $dark-grey, 0 1px 1px $dark-grey, -1px 0 1px $dark-grey;

		}

		&:active {

			background: $dark-blue;

		}

	}

	.button-disabled,
	.button-secondary.disabled,
	.button-secondary:disabled,
	.button-secondary[disabled],
	.button.disabled,
	.button:disabled,
	.button[disabled] {

		background: $dark-grey !important;
		border-color: $ultra-grey !important;
		color: $light-grey !important;
		text-shadow: none !important;
		opacity: 0.65;

	}

	.media-frame {

		input[type=text],
		input[type=password],
		input[type=number],
		input[type=search],
		input[type=email],
		input[type=url],
		select,
		textarea {

			background-color: $dark-silver;
			border-color: $ultra-grey;
			color: $white;

			&::placeholder {

				color: $light-grey;

			}

		}

	}

	#titlediv #title,
	input[type=text],
	input[type=search],
	input[type=radio],
	input[type=tel],
	input[type=time],
	input[type=url],
	input[type=week],
	input[type=password],
	input[type=checkbox],
	input[type=color],
	input[type=date],
	input[type=datetime],
	input[type=datetime-local],
	input[type=email],
	input[type=month],
	input[type=number],
	select,
	textarea {

		background-color: $dark-silver;
		border-color: $ultra-grey;
		color: $white;

		&.readonly,
		&.disabled {
		
			background-color: $dark-grey;
			color: $light-grey;
			opacity: 0.75;
		
		}

		&[readonly],
		&[disabled] {
		
			background-color: $dark-grey;
			color: $light-grey;
			opacity: 0.75;
		
		}

	}

	input[type=checkbox]:checked:before {

		color: $white;

	}

	input[type=radio]:checked:before {

		background-color: $white;

	}

	::-webkit-input-placeholder {

		color: $white;

	}

	::-moz-placeholder {

		color: $white;

	}

	:-ms-input-placeholder {

		color: $white;

	}

	:-moz-placeholder {

		color: $white;

	}

	a,
	.button-link {

		color: $bright-blue;
		text-decoration: none;

		&:hover {

			color: $light-blue;
			text-decoration: none;

		}

		&:focus {

			color: $light-blue;
			-webkit-box-shadow: 0 0 0 1px $light-blue, 0 0 2px 1px rgba(0, 160, 210, 0.8);
			box-shadow: 0 0 0 1px $light-blue, 0 0 2px 1px rgba(0, 160, 210, 0.8);

		}

	}

}

input.readonly, input[readonly], textarea.readonly, textarea[readonly] {

	background-color: $dark-grey;

}