/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS and IE.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Remove the grey highlight on links in iOS
*/

/*
1. Remove the margin and padding in all browsers.
*/
html,
body {
  padding: 0px;
  margin: 0px;
  /*
   * If we don't provide an empty string as the default value, the browser will ignore the font-family rule
   * when the CSS variable (--sw-font-family) is not defined.
   *
   * We are not using $base-font-family as the default value of the CSS variable (--sw-font-family) because:
   * - If --sw-font-family contains an invalid value or the browser fails to load the font,
   *   we want to fall back to the standard fonts.
  */
  font-family: var(--sw-font-family, ''), Twemoji Country Flags, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  height: 100%;
}

html {
  line-height: 1.5; /* 1 */
  text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  font-size: 62.5%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--spr-text-01);
  font-size: 1rem;
}

/*
1. Add the correct height in Firefox and address the box-sizing issue.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-block-start-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
1. Reset links to optimize for opt-in styling instead of opt-out.
2. Improve readability of focused elements when they are also in an active/hover state.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

a:active,
a:hover {
  outline: 0;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
Contain overflow in all browsers.
*/

pre {
  overflow: auto;
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
2. Remove gaps between table borders by default.
*/

table {
  border-color: inherit; /* 1 */
  border-spacing: 0; /* 2 */
  border-collapse: collapse; /* 2 */
}

td,
th {
  padding: 0;
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
4. iOS adds rounded borders by default
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
  border-radius: 0; /* 4 */
}

/*
 Don't inherit the `font-weight` (applied by a rule above).
 NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/

optgroup {
  font-weight: bold;
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Undo Normalize's default here to match our global overrides.
2. This overrides the extra rounded corners on search inputs in iOS so that our
 `.form-control` class can properly style them. Note that this cannot simply
 be added to `.form-control` as it's not specific enough. For details, see
 https://github.com/twbs/bootstrap/issues/11586.
*/

input[type='search'] {
  box-sizing: inherit; /* 1 */
  -webkit-appearance: none; /* 2 */
}

/*
 Remove inner padding and search cancel button in Safari and Chrome on OS X.
 Safari (but not Chrome) clips the cancel button when the search input has
 padding (and `textfield` appearance).

 @see https://www.codestudy.net/blog/how-do-i-remove-all-default-webkit-search-field-styling/#step-5-hide-the-cancel-button
*/

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

:where(button, [type='button'], [type='reset'], [type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Remove inner padding and border in Firefox 4+.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
Use the modern Firefox focus style for all focusable elements.
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

:where([type='search']) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

/*
Define consistent border, margin, and padding.
Chrome and Firefox set a `min-width: min-content;` on fieldset,
*/

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

ol,
ul,
dl,
menu {
  margin: 0;
}

/*
1. Prevent resizing textareas horizontally by default.
2 .Remove default vertical scrollbar in IE 8/9/10/11.
3. user should not be able to resize the text-area
*/

textarea {
  overflow: auto; /* 2 */
  resize: none; /* 3 */
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: var(--spr-text-placeholder); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role='button'] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:where(:disabled) {
  cursor: default;
}

/*
1. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
video,
canvas,
audio,
iframe,
embed {
  vertical-align: middle; /* 1 */
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

/*
 Prevent modern browsers from displaying `audio` without controls.
 Remove excess height in iOS 5 devices.
*/

audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 Address `[hidden]` styling not present in IE 8/9/10.
 Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/

[hidden],
template {
  display: none;
}

/**
 * Remove the border on iframes in all browsers.
*/

iframe {
  border-style: none;
}

/* by default, `-webkit-user-select: none` gets added in input[draggable="true"] for Safari.
  Need to give it specifically webkit-user-select: text; for Safari
  Ref: https://stackoverflow.com/questions/32192686/cannot-type-in-password-field-with-draggable-true-in-safari
*/

input[draggable='true'] {
  -webkit-user-select: text;
  user-select: text;
}

/* globals.css  */

*:focus {
  outline: none;
}

*:focus-visible {
  outline-style: solid;
  outline-color: var(--spr-focus-01);
}

a {
  color: var(--spr-link);
  text-decoration: none;
}

a:active,
a:hover {
  text-decoration: underline;
}

a:not([data-spaceweb="button"]):focus {
  outline: -webkit-focus-ring-color 2px solid;
  outline-offset: 1px;
  border-radius: 2px;
}

/* color values can be replace with var(--spr-ui-06)  */

blockquote {
  margin: 0 0 1rem;
  padding-inline: 1rem 0;
  border-inline-start: 0.25rem solid #eceeef;
}

/* Hyperspace h1-h6 */

h1 {
  font-size: 4.2rem;
  line-height: 4.8rem;
  font-weight: 600;
}

h2 {
  font-size: 2.4rem;
  line-height: 2.9rem;
  font-weight: 600;
}

h3 {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 600;
}

h4 {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
}

h5 {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 600;
}

h6 {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 600;
}

/*
1. Remove browser default top margin
2. Reset browser default of `1em` to use `rem`s
*/

pre {
  margin-block-start: 0; /* 1 */
  margin-block-end: 1rem; /* 2 */
  color: var(--spr-text-02);
  line-height: 1.5;
  padding: 1.2rem;
  white-space: pre-wrap;
  border-radius: 0.4rem;
  font-size: 90%;
}

pre code {
  background-color: transparent;
}

/* Figures */

/*
  Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
  We reset that to create a better flow in-page.
*/

figure {
  margin: 0 0 1rem;
}

/*
Tables
Reset for nesting within parents with `background-color`.
*/

table {
  background-color: transparent;
}

/* Centered by default, but left-align-ed to match the `td`s below. */

th {
  text-align: start;
}

caption {
  padding-block: 0.75rem;
  color: var(--spr-border-04);
  text-align: start;
  caption-side: bottom;
}

/*
 inline-block is kept to not break any thing from app-client
*/

label {
  display: inline-block;
}

/* Reset the entire legend element to match the `fieldset` */

legend {
  display: block;
  width: 100%;
  margin-block-end: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
}

/*
 * 1. Remove animations when motion is reduced (opinionated).
 * 2. Remove fixed background attachments when motion is reduced (opinionated).
 * 3. Remove timed scrolling behaviors when motion is reduced (opinionated).
 * 4. Remove transitions when motion is reduced (opinionated).
 */

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important; /* 1 */
    animation-duration: 1ms !important; /* 1 */
    animation-iteration-count: 1 !important; /* 1 */
    background-attachment: initial !important; /* 2 */
    scroll-behavior: auto !important; /* 3 */
    transition-delay: 0s !important; /* 4 */
    transition-duration: 0s !important; /* 4 */
  }
}

@media (forced-colors: active) {
  svg {
    fill: currentColor !important;
    color: inherit !important;
  }
}