/* -------------------------------- */
/* ---------  PAGE LOGIN  --------- */
/* -------------------------------- */

/* Variables */
body.login {
  --color-primary : #55c5ca;
  --color-primary-hover : #007f86;
}

/* Selection */
body.login ::selection {
  background-color: var(--color-primary);
  color: white;
}

/* Logo */
body.login h1 a {
  background-image: url('../images/logo-wimmo.svg');
  background-position: bottom;
  background-size: contain;
  width: 100%;
  pointer-events: none;
}

/* Inputs */
body.login input:is([type="text"],[type="password"]):focus {
  border-color: var(--color-primary);
  border-width: 2px;
  box-shadow: none;
}

/* Mot de passe */
body.login .button.wp-hide-pw:is(:hover,:focus,:active) {
  color: var(--color-primary-hover);
}

/* Bouton de connexion */
body.login .button.button-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transition-duration: .3s;
}
body.login .button.button-primary:is(:hover,:focus,:active) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: white;
}
body.login .button.button-primary:focus {
  box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--color-primary);
}

/* Liens */
body.login a {
  color: var(--color-primary);
}
body.login a:is(:hover,:focus,:active),
body.login #nav a:is(:hover,:focus,:active),
body.login #backtoblog a:is(:hover,:focus,:active) {
  color: var(--color-primary);
  text-decoration: none;
}
body.login a:focus {
  box-shadow: 0 0 0 1px var(--color-primary),0 0 2px 1px var(--color-primary);
}

/* Bouton du sélecteur de langue */
body.login select:is(:hover,:focus,:active) {
  color: var(--color-primary);
}
body.login .button {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transition-duration: .3s;
}
body.login .button:is(:hover,:focus,:active) {
  color: white;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Focus des éléments cliquables */
body.login :is(.button.wp-hide-pw,input[type="checkbox"],select):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}