/**
 * A nested map of all of our z-index values.
 *
 * Please add new values relative to their parent stacking context. For
 * example the values of 'root' are elements with a stacking context that have
 * no parents with a stacking context, other than the default html root.
 *
 * A Stacking Context is created when:
 * 1. It's the root element (HTML)
 * 2. Has a position other than static, with a z-index value
 * 3. position:fixed
 * 4. Has one of the following css properties:
 *    (transform, opacity<1, mix-blend-mode, filter)
 * 5. isolation:isolate
 * 6: -webkit-overflow-scrolling: touch
 *
 * So before adding a new z-index:
 * 1. You'll want to make sure the element actually creates a stacking context
 * 2. Look up what its parent stacking context is
 * You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both.
 *
 * For readability please sort values from lowest to highest.
 *
 * Usage:
 * .environment-badge {
 *     z-index: z-index( 'root' '.environment-badge' );
 * }
 *
 * For a refresher on stacking contexts see:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 */
@use "sass:map";

$z-layers: (
	"root": (
		".translator-invitation:before": -1,
		".NuxWelcome:before": -1,
		".infinite-scroll-end:before": -1,
		".is-group-editor::before": -1,
		".site-icon.is-blank .gridicon": 0,
		".dops-chart__bar-section.is-spacer": 0,
		".gear-dropdown:after": 0,
		".plan-compare-card__ribbon": 1,
		".reader__featured-post-title": 1,
		".reader-list-gap__button": 1,
		".post-trends__title": 1,
		".plugin-item__label": 1,
		".wp-editor-tools": 1,
		".plan .gridicons-checkmark-circle": 1,
		".plan-discount-message": 1,
		".editor__switch-mode": 1,
		".auth__form .form-fieldset input": 1,
		".dops-chart__empty": 1,
		".dops-chart__bar-marker": 1,
		".dops-chart__bar-section.is-ghost::after": 1,
		".billing-history-page .filter-popover-content": 1,
		".module-content-table::after": 1,
		".stats-popular__empty": 1,
		".menus__menu-item.is-lander": 1,
		".people-list-item__label": 1,
		".is-actionable .theme__active-focus": 1,
		".dops-accessible-focus .current-theme__button:focus": 1,
		".signup-processing-screen__processing-step.is-processing:before": 1,
		".dops-accessible-focus .theme__more-button button:focus": 1,
		".reader-update-notice": 2,
		".people-list-item .card__link-indicator": 2,
		".updated-confirmation": 2,
		".auth__form .form-fieldset input:focus": 2,
		".toolbar-bulk": 2,
		".menus__menu-item": 2,
		".menus__menu-item-open:before": 2,
		".dops-chart__bar-section": 2,
		".module-content-table tbody th:first-child": 2,
		"ul.module-header-actions .module-header-action-link": 2,
		".stats-module.is-loading .module-header-title::after": 2,
		"ul.module-content-list-item-action-submenu": 2,
		"ul.module-content-list-item-actions": 2,
		".site-indicator__button": 3,
		"ul.module-content-list-item-actions.collapsed": 3,
		".auth__input-wrapper .gridicon": 3,
		".auth__self-hosted-instructions": 4,
		".auth__form .form-password-input__toggle-visibility": 4,
		".site-selector": 10,
		".editor-featured-image__preview.is-transient::after": 10,
		".wp-secondary .site-selector": 10,
		".range__label": 10,
		".sticky-panel.is-sticky .sticky-panel__content": 20,
		".editor-featured-image .editor-drawer-well__remove": 20,
		".main": 20, //TODO: this doesn't always have a stacking context
		//'tinymce-toolbar': 20, client/components/tinymce/index.jsx
		".dops-search": 22,
		"#translator-launcher": 99,
		".author-selector__popover.popover": 100,
		".dops-search.is-pinned": 170,
		".dops-select-dropdown.is-open .dops-select-dropdown__container": 170,
		".dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container": 170,
		".sites-dropdown.is-open .sites-dropdown__wrapper" : 170,
		".popover.editor-visibility__popover": 179,
		".feature-example__gradient": 179,
		".global-notices": 179,
		".notices-list.is-pinned": 180,
		".notices-list.is-pinned .notice": 180,
		".masterbar": 180,
		".detail-page__backdrop": 190,
		".layout__loader": 200,
		".offline-status": 200,
		".reader-post-images__full-list": 200,
		".environment-badge": 999,
		".customizer-loading-panel__muse-status": 999,
		".customizer-loading-panel__placeholder-change-theme": 999,
		".module-overlay": 1000,
		".drop-zone": 1000,
		".dops-popover": 1000,
		".sharing-buttons-preview-buttons__more": 1000,
		".sortable-list__item.is-draggable.is-active": 1000,
		".dops-chart__tooltip": 1000,
		".drop-zone__content": 1010,
		".wp-overlay": 9999,
		".dropdown-menu": 9999,
		".main.customize.is-iframe": 9999,
		".fullscreen-overlay": 100005,
		"#wp_editbtns": 100020,
		"#wp-fullscreen-body": 100010,
		".wp-fullscreen-wrap": 100015,
		"#wp-fullscreen-statusbar": 100020,
		"#fullscreen-topbar": 100020,
		".wp-fullscreen-active #TB_overlay": 100050,
		".wp-fullscreen-active #TB_window": 100051,
		"div.mce-inline-toolbar-grp": 100100,
		".dialog__backdrop": 100200,
		".wplink__dialog.dialog.card": 100200,
		".web-preview": 100200,
		".category-selector__add-category-info": 100201,
		".dops-popover.is-dialog-visible": 100300,
		"body .webui-popover": 100300,
		".fullscreen-fader": 200000,
		".guided-tours__overlay": 200050,
		".guided-tours__step": 201000,
		"#habla_window_div.habla_window_div_base": 99999999 //olark
	),
	".plan-compare-card__ribbon": (
		".plan-compare-card__ribbon-title::before": -1,
		".plan-compare-card__ribbon-title::after": -1
	),
	".environment-badge": (
		".environment-badge .environment::before": -1,
		".environment-badge .bug-report": 1000
	),
	".masterbar": (
		".masterbar__notifications-bubble": 99999
	),
	".detail-page__backdrop": (
		".detail-page__action-buttons": 200
	),
	".toolbar-bulk": (
		".toolbar-bulk__check-all": 1,
		".toolbar-bulk__selection-options": 1,
		".toolbar-bulk__more-actions": 1,
		".plugins .toolbar-bulk__toggle": 21,
		".toolbar-bulk__toggle": 30
	),
	".dops-popover": (
		".input-chrono__container .gridicons-calendar": 0,
		"input.input-chrono": 1,
		".dops-popover .dops-popover__arrow": 1,
		".post-schedule__header": 1
	),
	".dops-search": (
		".dops-search__input": 10,
		".dops-search.is-searching .dops-spinner": 20,
		".dops-search .dops-search__open-icon": 20,
		".dops-search .dops-search__close-icon": 20
	),
	".profile-gravatar__edit-label-wrap": (
		".profile-gravatar__edit-label-wrap:after": 0,
		".profile-gravatar__edit-label": 1000
	),
	".media-library__list-item": (
		".media-library__list-item.is-selected::after": 10,
		".media-library__list-item.is-transient .media-library__list-item-figure::after": 10,
		".media-library__list-item-selected-icon .gridicon": 20,
		".media-library__list-item-spinner": 20,
		".media-library__list-item-edit": 20
	),
	".dialog__backdrop": (
		".editor-media-modal .section-nav": 10,
		".editor-media-modal .notice": 10,
		".editor-media-modal-gallery__preview-toggle": 100,
		".editor-contact-form-modal .section-nav": 10
	),
	// aka 'main'
	".following-edit": (
		".following-edit__subscribe-form .gridicons-add-outline": 23,
		".following-edit__subscribe-form .card.is-search-result": 35
	),

	// The following may be inserted into different areas.
	// The parent stacking context may be root, or something
	// else depending on where it is inserted.
	"icon-parent": (
		".sidebar__menu .gridicon.gridicons-external": 1,
		".sidebar__menu .noticon-external": 1
	),
	"screen-reader-text-parent": (
		".screen-reader-text:focus": 100000
	),
	"button-group-parent": (
		".button-group .button:focus": 1
	),
	"progress-indicator-parent": (
		".progress-indicator__cancel.noticon:before": 1,
		".progress-indicator .is-success": 2
	),
	"dops-section-nav-tabs__dropdown-parent": (
		".dops-section-nav-tabs__dropdown": 3,
		".dops-section-nav-tabs__dropdown.is-open": 4
	),
	"reader-card-follow-button-parent": (
		".reader__card.card .follow-button": 1
	)
);

// allows us to do a nested fetch
@function map-deep-get( $map, $keys... ) {

	@each $key in $keys {

		@if not map.has-key( $map, $key) {

			@warn "No layer found for `#{$key}` of `[#{ $keys }]` in $z-layers map. Property omitted.";
			@return map.get( $map, $key );
		}
		$map: map.get($map, $key);
	}

	@return $map;
}

@function z-index( $keys... ) {

	@return map-deep-get( $z-layers, $keys... );
}
