: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;
    margin-top: 0 !important;
    vertical-align: baseline !important;
  }
}

/*
 * Background utility classes for the Flatsome color presets.
 *
 * Blocks with the `flatsomeColor` support add `has-<slug>-background` for color
 * presets (see `Definitions::get_background_class_name`). WordPress core only
 * ships the `background-color` longhand, so the `background` shorthand is
 * defined here. The dynamic class emits `--fs-background-opacity` (e.g. `50%`)
 * for opacity presets like `var:preset|color|primary/50`; it defaults to 100%
 * so plain presets paint the solid color. Semantic colors also apply their
 * paired `*-contrast` foreground as the text color, so a `primary` background
 * renders readable `primary-contrast` text.
 */
.has-primary-background {
  background: color-mix(in srgb, var(--wp--preset--color--primary) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--primary-contrast);
}
.has-secondary-background {
  background: color-mix(in srgb, var(--wp--preset--color--secondary) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--secondary-contrast);
}
.has-success-background {
  background: color-mix(in srgb, var(--wp--preset--color--success) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--success-contrast);
}
.has-warning-background {
  background: color-mix(in srgb, var(--wp--preset--color--warning) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--warning-contrast);
}
.has-error-background {
  background: color-mix(in srgb, var(--wp--preset--color--error) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--error-contrast);
}
.has-background-background {
  background: color-mix(in srgb, var(--wp--preset--color--background) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--preset--color--foreground);
}
.has-surface-background {
  background: color-mix(in srgb, var(--wp--preset--color--surface) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--surface-contrast);
}
.has-muted-background {
  background: color-mix(in srgb, var(--wp--preset--color--muted) var(--fs-background-opacity, 100%), transparent);
  color: var(--wp--custom--color--muted-contrast);
}

/* Palette colors selectable as a background but without a paired foreground. */
.has-foreground-background {
  background: color-mix(in srgb, var(--wp--preset--color--foreground) var(--fs-background-opacity, 100%), transparent);
}
.has-border-background {
  background: color-mix(in srgb, var(--wp--preset--color--border) var(--fs-background-opacity, 100%), transparent);
}
.has-divider-background {
  background: color-mix(in srgb, var(--wp--preset--color--divider) var(--fs-background-opacity, 100%), transparent);
}