common.scss

@import "./elements.scss";

// The following selectors have increased specificity (using the :root prefix)
// to assure colors take effect over another base class color, mainly to let
// the colors override the added specificity by link states such as :hover.

:root {
	@include background-colors-deprecated();
	@include foreground-colors-deprecated();
	@include gradient-colors-deprecated();
	// This CSS Custom Properties aren't used anymore as defaults,
	// but we still need to keep them for backward compatibility.
	--wp--preset--font-size--normal: 16px;
	--wp--preset--font-size--huge: 42px;
}

// Font sizes (not used now, kept because of backward compatibility).
.has-regular-font-size {
	font-size: 1em;
}

.has-larger-font-size {
	font-size: 2.625em;
}

.has-normal-font-size {
	font-size: var(--wp--preset--font-size--normal);
}

.has-huge-font-size {
	font-size: var(--wp--preset--font-size--huge);
}

// Text alignments.
.has-text-align-center {
	text-align: center;
}

.has-text-align-left {
	/*rtl:ignore*/
	text-align: left;
}

.has-text-align-right {
	/*rtl:ignore*/
	text-align: right;
}

.has-text-align-justify {
	text-align: justify;
}

// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
#end-resizable-editor-section {
	display: none;
}

// Block alignments.
.aligncenter {
	clear: both;
}

// Justification.
.items-justified-left {
	justify-content: flex-start;
}

.items-justified-center {
	justify-content: center;
}

.items-justified-right {
	justify-content: flex-end;
}

.items-justified-space-between {
	justify-content: space-between;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: $gray-300;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/**
 * The following provide a simple means of applying a default border style when
 * a user first makes a selection in the border block support panel.
 * This prevents issues such as where the user could set a border width
 * and see no border due there being no border style set.
 *
 * This is intended to be removed once intelligent defaults can be set while
 * making border selections via the block support.
 *
 * See: https://github.com/WordPress/gutenberg/pull/33743
 */
html :where(.has-border-color) {
	border-style: solid;
}
html :where([style*="border-top-color"]) {
	border-top-style: solid;
}
html :where([style*="border-right-color"]) {
	border-right-style: solid;
}
html :where([style*="border-bottom-color"]) {
	border-bottom-style: solid;
}
html :where([style*="border-left-color"]) {
	border-left-style: solid;
}

html :where([style*="border-width"]) {
	border-style: solid;
}
html :where([style*="border-top-width"]) {
	border-top-style: solid;
}
html :where([style*="border-right-width"]) {
	border-right-style: solid;
}
html :where([style*="border-bottom-width"]) {
	border-bottom-style: solid;
}
html :where([style*="border-left-width"]) {
	border-left-style: solid;
}

/**
 * Provide baseline responsiveness for images.
 */
html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 100%;
}

/**
 * Reset user agent styles for figure element margins.
 */
:where(figure) {
	margin: 0 0 1em 0;
}

// Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
// This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
html :where(.is-position-sticky) {
	/* stylelint-disable length-zero-no-unit */
	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); // 0px is set explicitly so that it can be used in a calc value.
	/* stylelint-enable length-zero-no-unit */
}

// To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
// within the scope of the position classname. This is required because the admin bar
// is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
@media screen and (max-width: 600px) {
	html :where(.is-position-sticky) {
		/* stylelint-disable length-zero-no-unit */
		--wp-admin--admin-bar--position-offset: 0px; // 0px is set explicitly so that it can be used in a calc value.
		/* stylelint-enable length-zero-no-unit */
	}
}