/**
 * General styles
 *
 */

.wpcom-site__global-noscript {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 6px;
	color: var(--color-text-inverted);
	background: color-mix(in srgb, var(--color-neutral-70) 80%, transparent);
	text-align: center;
	z-index: z-index("root", ".wpcom-site__global-noscript");
}

/* =Global
----------------------------------------------- */

@-webkit-viewport {
	width: device-width;
}
@-moz-viewport {
	width: device-width;
}
@-ms-viewport {
	width: device-width;
}
@-o-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

// make sure layout can fill the viewport
html,
body,
.wpcom-site {
	height: 100%;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	background: var(--color-surface-backdrop);
	color: var(--color-text);
	font-size: $font-body;
	line-height: 1.5;

	-ms-overflow-style: scrollbar;

	&.theme-default.is-global,
	&.theme-default.is-section-stepper,
	&.theme-default.is-section-login,
	&.theme-default.is-section-signup {
		background: var( --color-main-background );
	}

	// This fixes an issue with the `click-outside` package not working on mobile.
	// Specifically, this makes clicking outside a popover work on touch devices. -shaun
	@include breakpoint-deprecated( "<660px" ) {
		cursor: pointer;
	}

	/* stylelint-disable-next-line unit-allowed-list */
	@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
		&.font-smoothing-antialiased {
			text-rendering: optimizeLegibility;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
		}
	}
}

button {
	font-size: $font-body-small;
}

body,
button,
input,
select,
textarea,
.button,
#footer,
#footer a.readmore {
	font-family: $sans;
}

/*!rtl:ignore*/
body.rtl,
.rtl button,
.rtl input,
.rtl select,
.rtl textarea,
.rtl .button,
.rtl #footer,
.rtl #footer a.readmore {
	font-family: $sans-rtl;
}

/*!rtl:ignore*/
:lang(he) body.rtl,
:lang(he) .rtl button,
:lang(he) .rtl input,
:lang(he) .rtl select,
:lang(he) .rtl textarea,
:lang(he) .rtl .button,
:lang(he) .rtl #footer,
:lang(he) .rtl #footer a.readmore {
	font-family: $sans;
}

/*!rtl:ignore*/
.rtl {
	.gridicon {
		&.gridicons-chevron-left,
		&.gridicons-chevron-right,
		&.gridicons-arrow-left,
		&.gridicons-arrow-right,
		&.gridicons-external,
		&.gridicons-cart {
			transform: scaleX(-1);
		}
	}
}

.notifications {
	display: inherit;
}

noscript {
	text-align: center;
	margin-top: 3em;
	display: block;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	text-wrap: balance; // TODO: remove this fallback once `pretty` is globally supported.
	text-wrap: pretty;
}
caption,
figcaption {
	text-wrap: balance;
	text-wrap: pretty;
}
hr {
	background: var(--color-neutral-10);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Text elements */
p,
ul,
ol,
blockquote {
	text-wrap: pretty;
}
p {
	margin-bottom: 1.5em;
}
ul,
ol {
	margin: 0 0 1.5em 3em;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: 600;
}
dd {
	margin: 0 1.5em 1.5em;
}
b,
strong {
	font-weight: 600;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	margin: 10px 0 0;
	background: var(--color-neutral-0);
	padding: 10px 10px 1px;
	border-radius: 2px;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: var(--color-neutral-0);
	font-family: $monospace;
	font-size: $font-body;
	line-height: 1.6;
	margin-bottom: 1.6em;
	padding: 1.6em;
	overflow: auto;
	max-width: 100%;
}
code,
kbd,
tt,
var {
	font: 15px $code;
}
abbr,
acronym {
	border-bottom: 1px dotted var(--color-neutral-10);
	cursor: help;
	// Prevent double underline in Chrome
	text-decoration: none;
}
mark,
ins {
	background: var(--color-warning-light);
	text-decoration: none;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
th {
	font-weight: 600;
}

.hide,
.hidden {
	display: none;
}

/* Links */
a,
a:visited {
	color: var(--color-link);
}

a:hover,
a:focus,
a:active {
	color: var(--color-link-dark);
}

.link--caution,
.link--caution:visited,
.is-link.link--caution,
.is-link.link--caution:visited {
	&,
	&:hover,
	&:focus,
	&:active {
		color: var(--color-error);
	}
}

html.iframed {
	overflow: hidden;
}

/* Emoji and smileys */
img.emoji,
img.wp-smiley {
	height: 1em;
	max-height: 1em;
	display: inline;
	margin: 0;
	padding: 0 0.2em;
	vertical-align: -0.1em;
	width: 1em;
}

/* =Media
----------------------------------------------- */

img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	height: auto;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/* Netter min-height for the SoundCloud embeds */
.wpcom-soundcloud-player,
.embed-soundcloud iframe {
	min-height: 150px;
}

// added to the html element when we don't want the background content to scroll
html.no-scroll {
	overflow: hidden;
}

body.no-scroll {
	overflow: hidden;
	height: 100vh;
}
