:root {
  --fs-element-th-letter-spacing: 0.05em;
  --fs-scroll-padding-top: calc(var(--fs-blocks-header-stuck-height, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--base));
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
	box-sizing: border-box;
  scroll-padding-top: var(--fs-scroll-padding-top);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
  /*
   * A WooCommerce block adds `overflow:auto` to the body for
   * some reason, so we use !important for now to override it.
   * TODO: Investigate...
   */
  overflow-x: clip !important;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

img,
figure,
video {
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

textarea,
input:where(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="text"],
  [type="tel"],
  [type="url"]
) {
	-webkit-appearance: none;
	appearance: none;
  max-width: 100%;
  width: 100%;

  &:focus-visible {
    outline: none;
  }

  /** TODO: Remove these and use theme.json instead when WordPress 6.9 is released. */
  padding-block: var(--wp--custom--element--input--padding-block);
  padding-inline: var(--wp--custom--element--input--padding-inline);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: var(--wp--preset--shadow--base);
}

/**
 * TODO: Remove use theme.json instead when WordPress 6.9 is released.
 */

select {
  appearance: none;
  padding-block: var(--wp--custom--element--input--padding-block);
  padding-inline-start: var(--wp--custom--element--input--padding-inline);
  padding-inline-end: 2.75em;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--base);
  box-shadow: var(--wp--preset--shadow--base);
  font-size: var(--wp--preset--font-size--small);
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right .5em top 50%;
  background-repeat: no-repeat;
  background-size: auto 1.25em;
}

input[type="button"],
input[type="submit"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

textarea {
  display: block;
  width: 100%;
  resize: vertical;
  field-sizing: content;
}

[hidden] {
  display: none !important;
}

td, th {
  text-align: left;
}

th {
  letter-spacing: var(--fs-element-th-letter-spacing);
  text-transform: uppercase;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* TODO: Move to admin styles */
#wp-admin-bar-flatsome_panel > a {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;

  svg {
    display: block;;
  }
}