/* The controls of the sign-in pages: the labels, the fields and their focus
   and error states, the boxes for an error, a warning and a success, and the
   buttons. The pages on login_base.html load this before main.css. The Tip Jar
   home page (payments/tip_jar/home.html) is a variant of those pages, and it
   loads this too, so a control looks and behaves the same on all of them. The
   colors and the focus ring are the ones of pinecast-ts. Put no layout here:
   a page has its own, and it may change the size of a control (the button of
   the Tip Jar home page is smaller). */

form label {
  display: block;
  margin-bottom: 20px;
}
form label > span {
  color: #090909;
  font-family: "Monument Grotesk Bold", "ABC Monument Grotesk Bold", sans-serif;
  font-size: 18px;
  line-height: 18px;
  display: block;
  padding-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="datetime-local"],
textarea {
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #888;
  color: #090909;
  font-size: 16px;
  height: 40px;
  padding: 0 16px;
  transition: box-shadow 0.2s, opacity 0.2s;
  width: 100%;
}
textarea {
  height: 64px;
}
input[type="password"] {
  letter-spacing: 4px;
}

/* The focus ring of the controls of the dashboard (`focusRing` in pinecast-ts,
   packages/styles/src/focusRing.ts): a 2px outline in the `focusRing` token,
   2px outside the control, that fades in. A color change is not motion, so it
   runs under `prefers-reduced-motion` too. It is an outline and not a box
   shadow, so forced colors mode keeps it. A text field shows it on every focus,
   as it does in the dashboard. */
@keyframes focus-ring-fade-in {
  from {
    outline-color: transparent;
  }
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
  animation: focus-ring-fade-in 0.2s ease-out;
  outline: 2px solid #090909;
  outline-offset: 2px;
}

/* A field that an error is about, as in the dashboard (`$invalid` in
   `TextInputWrapper`): the edge is `borderRedAccent`, and the ring is
   `borderRedLight`, the red that clears 3:1 on the page. */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  box-shadow: 0 0 0 1px #f05569;
}
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  outline-color: #a3132d;
}
input[type="text"]::placeholder,
input[type="text"]::-webkit-placeholder,
input[type="email"]::placeholder,
input[type="email"]::-webkit-placeholder,
input[type="url"]::placeholder,
input[type="url"]::-webkit-placeholder,
input[type="number"]::placeholder,
input[type="number"]::-webkit-placeholder,
input[type="password"]::placeholder,
input[type="password"]::-webkit-placeholder,
input[type="datetime-local"]::placeholder,
input[type="datetime-local"]::-webkit-placeholder,
textarea::placeholder,
textarea::-webkit-placeholder {
  color: #888;
}

form label > small {
  color: #616669;
  display: block;
  margin-top: 4px;
}

.error,
.warning,
.success {
  border-radius: 10px;
  font-size: 16px;
  margin: 10px 0 20px;
  padding: 16px;
}
/* The colors of the negative Callout in pinecast-ts (badgeRedText on
   badgeRedBackground), 4.86:1. White on the red these pages had was 3.74:1.
   Its border is 1px in the color of the text, as the Callout's is.
   These pages have no dark mode; if they get one, use the Callout's dark
   pair there: #ff809e on #6b261f. */
.error {
  background: #ff92a1;
  border: 1px solid currentcolor;
  color: #7e0b49;
}
.warning {
  background: #ff6f17;
  color: #fff;
}
.success {
  background: #85b192;
  color: #090909;
}
.error strong,
.warning strong,
.success strong {
  display: block;
  font-family: "Monument Grotesk Bold", "ABC Monument Grotesk Bold", sans-serif;
}

.btn {
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 3px 4px rgba(0, 0, 0, 0.05),
    0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 0 0 transparent inset;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-family: "Monument Grotesk Bold", "ABC Monument Grotesk Bold", sans-serif;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  opacity: 1;
  padding: 0 32px;
  position: relative;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
  user-select: none;
}
.btn.is-disabled {
  opacity: 0.5;
}
.btn:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.15),
    0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 0 0 transparent inset;
  text-decoration: none;
}
/* Pressed, as the Button of the dashboard is: a 2px edge inside, in
   `borderBlueNormal`, and 1px down. */
.btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.05), inset 0 0 0 2px #c7ecfa;
  transform: translateY(1px);
}
/* On the keyboard's focus only, as in the dashboard. The ring meets the page,
   and not the fill of the button, so it is the same for both buttons. */
.btn:focus-visible {
  animation: focus-ring-fade-in 0.2s ease-out;
  outline: 2px solid #090909;
  outline-offset: 2px;
}

.btn.is-primary {
  background-color: #090909;
  color: #fff;
}