@use "sass:meta";

// selection color
::selection {
  background-color: get-var("selection-background-color") !important;
  color: get-var("selection-text-color") !important;
}

// inherit fonts for inputs and buttons
input,
// :not(button-group) > button,
textarea,
select {
  font: inherit !important;
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
}

// button font weight similar to chrome
button {
  font-weight: 500 !important;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none !important;
}

// font settings
$font-family: (
  "Roboto",
  sans-serif,
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji"
);

:root,
html,
body {
  --#{$prefix}-font-family: system-ui,
  -apple-system,
  #{meta.inspect($font-family)};

  font-family: var(--#{$prefix}-font-family) !important;
  text-rendering: optimizeLegibility;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  font-feature-settings: normal;
  font-variation-settings: normal;
  line-height: 1.2;
  tab-size: 4;
}

// Custom font (only for windows)
@media (-moz-platform: windows) {
  @include moz-pref-media("not userChrome.ui-system-font") {

    :root,
    html,
    body {
      --#{$prefix}-font-family: #{meta.inspect($font-family)};
    }

    *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *),
    *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *)::before,
    *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *)::after {
      font-family: var(--#{$prefix}-font-family) !important;
    }
  }
}