/**
 * Validation Manager
 *
 * Based on options defined in validation_manager_options.js, fields that have been validated get a class called
 * "validated-input," and an <output class="input-error-message"> error message may be appended to the field's
 * parent <label>/<fieldset>. This component provides styling for these inputs and error messages.
 *
 * This component is designed to be used with the nested_input_label.html.twig Symfony form theme and std_form.css.
 *
 * See Also: validation_manager.js, validation_manager_options.js, std_form.css, login_form.css, signup_form.css
 */

@-webkit-keyframes slide-down {
  from {
    max-height: 0;
  }

  to {
    max-height: 5em;
  }
}

@keyframes slide-down {
  from {
    max-height: 0;
  }

  to {
    max-height: 5em;
  }
}

input.validated-input,
select.validated-input {
  padding-bottom: 0.7125em;

  border-bottom: 0.1875em solid rgb(56, 167, 62);

  transition:
      border-bottom 100ms ease-out,
      padding 100ms ease-out;
}

input.validated-input {
  padding-right: 2.75em;

  background: url('/i/freetrial/validation/icon_checkmark.png') rgb(100%, 100%, 100%) right 1.3em center / 1em no-repeat;
}

html[dir='rtl'] input.validated-input {
  padding-left: 2.75em;
  padding-right: 0.8em;

  background-position: left 1.3em center;
}

select.validated-input {
  background-position: right 1.3em bottom 1.2em;
}


input.validated-input:focus,
input.validated-input:hover,
select.validated-input:focus,
select.validated-input:hover {
  border-color: rgb(56, 167, 62);
}

[type='checkbox'].validated-input:focus,
[type='checkbox'].validated-input:hover {
  border-color: rgb(247, 140, 37);
}

select.validated-input:focus,
select.validated-input:hover {
  background-image: url('/i/subscription_form/select_triangle_valid.svg');
}

/* IE11-specific. Removes custom background because IE11's arrows can't be removed. */
_:-ms-fullscreen,
select.validated-input:focus,
select.validated-input:hover {
  background-image: none;
}


.validated-input:invalid {
  margin-bottom: 0;

  border-bottom-color: rgb(187, 0, 0);
}

input.validated-input:invalid {
  background: url('/i/freetrial/validation/icon_x.png') rgb(100%, 100%, 100%) right 1.3em center / 1em no-repeat;
}

[type='checkbox'].validated-input:invalid,
[type='radio'].validated-input:invalid {
  background-image: none;
}

[type='checkbox'].validated-input:invalid {
  border-color: rgb(165, 162, 162);
}

[type='checkbox'].validated-input:invalid:focus,
[type='checkbox'].validated-input:invalid:hover {
  border-color: rgb(247, 140, 37);
}

[type='radio'].validated-input:invalid {
  border-bottom: 0;
}

.validated-input:invalid:focus,
.validated-input:invalid:hover {
  border-color: rgb(187, 0, 0);
}

select.validated-input:invalid:focus,
select.validated-input:invalid:hover {
  background-image: url('/i/subscription_form/select_triangle_invalid.svg');
}

/* IE11-specific. Removes custom background because IE11's arrows can't be removed. */
_:-ms-fullscreen,
select.validated-input:invalid:focus,
select.validated-input:invalid:hover {
  background-image: none;
}


.input-error-message {
  display: block;
  margin-top: 0.5em;
  overflow: hidden;

  font-size: 0.75em;
  color: rgb(187, 0, 0);

  -webkit-animation: 100ms slide-down cubic-bezier(0.5, 0, 1, 1);
  animation: 100ms slide-down cubic-bezier(0.5, 0, 1, 1);
}


/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

  input.validated-input {
    background-image: url('/i/freetrial/validation/icon_checkmark@2x.png');
  }

  input.validated-input:invalid {
    background-image: url('/i/freetrial/validation/icon_x@2x.png');
  }

  [type='checkbox'].validated-input:invalid,
  [type='radio'].validated-input:invalid {
    background-image: url('/i/freetrial/validation/icon_x@2x.png');
  }
}