/* Stylesheet for the authentication.html.erb layout.
   Was originally planning to inline all CSS into the layout but tricky
   due to requiring the compiled stylesheet for fonts. */

@font-face {
  font-family: "Silka";
  src: url("/assets/silka-regular-webfont-f96ddfcd.woff") format("woff"), url("/assets/silka-regular-webfont-160c8fd1.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Silka";
  font-style: normal;
  font-weight: bold;
  src: url("/assets/silka-bold-webfont-eb814300.woff2") format("woff2"), url("/assets/silka-bold-webfont-af9333d3.woff") format("woff");
}

@font-face {
  font-family: "Silka";
  font-style: normal;
  font-weight: 600;
  src: url("/assets/silka-semibold-webfont-ae10194c.woff2") format("woff2"), url("/assets/silka-semibold-webfont-5a1914c0.woff") format("woff");
}

/* Allow using <input type="number"> for 2FA codes without up/down arrows.
   From: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

input[type=number] { -moz-appearance: textfield; }

/* This should be reset by Tailwind but isn't for reasons unknown */
form { margin-block-end: 0; }

/* Replacement for placeholder:italic until twind supports latest Tailwind pseudo-elements */
input:placeholder-shown { font-style: italic; }

/* Base tag defaults */
html>body {
  font-family: Silka, "Helvetica Neue", Helvetica, sans-serif;

  a { color: #4e49c7; }
}

/* Sometimes we have basic formatting inside of I18n translation that we can't apply Tailwind classes to.
   For these cases wrap them in a .i18n-html container for some basic margins */
.i18n-html {
  p { margin-bottom: 1em; }
}