/* https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css */

form  {
  width: 100%;
  max-width: 100%; /*760px*/
}

/* this is a hack because we have a wrapper on webform
so we cannot use .stack. Remove the wrapper to fix it. */
form > .form-wrapper:first-of-type > * {
  margin-block: 0;
}

form > .form-wrapper:first-of-type > * + * {
  /* ↓ Top margin is only applied to successive elements */
  margin-block-start: var(--s2, 1.5rem);
}

input[type='text'],
input[type='email'],
input[type='password'],
select,
textarea {
  border: 1px solid var(--form-border-color);
  background-color: white;
  font-family: inherit;
  font-size: inherit;
  display: block;
  width: 100%;
  transition: color 1s ease-in-out, background-color .15s ease-in-out , border-color .15s ease-in-out;
  padding: 0.75rem 1.2rem;

}

input.error,
select.error,
textarea.error {
  border-color: var(--error-color);
}

fieldset legend {
  margin: 1.5rem 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 400;
}

label {
  display: inline-block;
  font-weight: 500;
  font-size: 1rem;
}

label.select,
.js-form-type-datelist label {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 1.5rem 0 1rem 0;
}

textarea {
  min-height: 8rem;
  box-shadow: none;
}

/* --- RADIO --- */

.form-radio-wrapper,
.form-checkbox-wrapper {
  display: block;
  margin-left: 1.7em;
  margin-bottom: 0.5rem;
}

label.checkbox,
label.radio {
  font-weight: inherit;
  cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
  vertical-align: text-bottom;
  display: inline-block;
  margin-top: .25em;
  float: left;
  margin-left: -1.7em;
  cursor: pointer;
  height: 1.1em;
  width: 1.1em;

  /* custom radio/checkbox */
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 50%;
  border:1px solid var(--form-border-color);
  transition: .15s ease-in-out;
  transition-property: background-color,border;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
  background-color: var(--primary-color);
  border-color: transparent;
}

input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-color: var(--primary-color);
  border-color: transparent;
}


input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
select:focus,
textarea:focus {
  border: 1px solid var(--primary-color);
  outline: none;
}

/* --- BUTTON -- */
.button,
a.button,
button {
  display: inline-block;
  background-color: var(--primary-color);
  border:0.08rem solid var(--primary-color);
  border-radius: var(--border-radius);
  color: white;
  line-height: 2.5rem;
  padding: 0 1.5rem;
  text-align: center;
  vertical-align: middle;
  transition: .15s ease-in-out;
  transition-property: color, border, background-color;
}

.button-small,
a.button-small {
  font-size: 0.8rem;
  line-height: 1.8rem;
  padding: 0 1rem;
}

.button.webform-button--draft,
.button.webform-button--previous,
.button-invert,
a.button-invert{
  background-color: inherit;
  color: var(--primary-color);
}

.button:hover,
a.button:hover,
button:hover {
  background-color: var(--primary-color-light);
  border-color: var(--primary-color-light);
  text-decoration: none;
}

.button.webform-button--draft:hover,
.button.webform-button--previous:hover,
.button-invert:hover,
a.button-invert:hover {
  background-color: var(--primary-color-lighter);
}

.button--danger, a.button--danger {
  background-color: var(--error-color);
  border-color: var(--error-color);
}

.button--danger:hover, a.button--danger:hover {
  background-color: var(--error-color);
  border-color: var(--error-color);
}



/* --- DRUPAL specific stuff---- */

.views-exposed-form{
  margin-bottom: var(--s2);
}

form .description,
.password-strength__title {
  color: var(--flip-color);
  font-size: 85%;
}

.form-item--error-message {
  color: var(--error-color);
}


.password-confirm-message .ok {
  color: green;
}

.password-confirm-message .error {
  color: var(--error-color);
}

.form-actions {
  margin-top: var(--s3);
}


input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

.form-item .description {
  max-width: 70ch;
}