/**
 * Critial rendering styles
 *
 * Since ext.tabberNeue is loaded a while after page load,
 * inline styles are needed to create an inital state and
 * avoid potential layout shifts. This should be kept as
 * small as possible.
 */

/* stylelint-disable selector-class-pattern */

/* Only apply skeleton UI when Tabber will be loaded */
.client-js {
	.tabber:not( .tabber--live ) {
		.tabber__header {
			height: 2.6em;
			box-shadow: inset 0 -1px 0 0;
			opacity: 0.1;

			&::after {
				position: absolute;
				width: 16ch;
				height: 0.5em;
				border-radius: 40px;
				margin-top: 1em;
				margin-left: 0.75em;
				animation-duration: 10s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: skeletonload;
				animation-timing-function: linear;
				background: #000;
				background: linear-gradient( to right, #202122 8%, #54595d 18%, #202122 33% );
				/* Use double quote in PHP */
				content: '';
			}
		}

		/**
		* Avoid layout shift by assigning the grid property early on
		* Because display:block does not take into account of bottom margin of the content
		*/
		.tabber__section {
			display: grid;
		}

		/**
		* Hide all other panels
		* All panels are stacked vertically initially
		* then panels are stacked horizontally after Tabber is loaded
		* Causing lots of layout shift
		*/
		.tabber__panel:not( :first-child ) {
			display: none;
		}
	}

	/* Hide no script message */
	.tabber__noscript {
		display: none;
	}
}

@keyframes skeletonload {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 100em 0;
	}
}