label {
  display: block;
  position: relative;
  margin-bottom: space(1);
  font-weight: 500;

  .name {
    display: inline-block;
    width: 84%;
    vertical-align: middle;
    line-height: 15px;
  }
}

/** Make sure the label is on top when an inline help text is displayed */
label:hover span.name {
  z-index: 4;
  position: relative;
}

select,
textarea,
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
button[aria-haspopup] {
  font-size: 13px;
  display: block;
  width: 100%;
  border: solid 1px var(--ui-on-surface-color-lighter);
  line-height: 20px;
  padding: space(1) space(2);
  box-sizing: border-box;
  border-radius: rounded();
  color: var(--ui-on-surface-color);

  &[aria-expanded=true],
  &:focus {
    border-color: var(--ui-on-surface-color-light);
    box-shadow: 0 0 0 2px var(--ui-selection-color-light);
  }
}

select {
  padding-right: space(8);
}

[type="checkbox"] {
  border-radius: rounded();
}

[type="checkbox"],
[type="radio"] {
  border: solid 1px var(--ui-on-surface-color-light);
  color: var(--ui-primary-color);

  &:focus {
    box-shadow: 0 0 0 2px var(--ui-surface-color), 0 0 0 4px var(--ui-primary-color-lighter);
  }
}

.invalid input,
.invalid textarea {
  border: solid 1px var(--ui-error-color);
}

textarea {
  width: 100%;
  height: 300px;
  padding-right: space(1);
}

textarea.short {
  height: 100px;
}

.radio_input,
.check_box_input {
  padding: space(1) 0;
  position: relative;

  // Make sure the input is on top when an inline help text is displayed
  &:hover input {
    z-index: 4;
    position: relative;
  }

  label {
    position: static;
    display: inline;
    padding-left: 5px;
    font-weight: normal;
  }

  .inline_help {
    right: -5px;
    top: space(1) * -1;
  }
}

.radio_input {
  padding-top: 10px;
}

.configuration_editor,
.configuration_editor_tab {
  > div {
    margin: space(2.5) 0;
  }

  .separator {
    border-top: solid 1px var(--ui-on-surface-color-lightest);
    margin: space(4) 0;
  }
}

.chapter_title,
.page_type {
  margin-top: 10px;
}

.form_fields > div {
  margin-top: 10px;
}

.slider_input {
  padding: space(1) 0 0;

  .slider {
    margin: 10px 10px 0 40px;
    border: 1px solid var(--ui-on-surface-color-lighter);
  }

  .ui-slider-handle {
    background: var(--ui-on-surface-color-lightest-solid);
    border: solid 1px var(--ui-on-surface-color-lighter-solid);
  }

  .value {
    font-size: 11px;
    margin: 7px 0;
    float: left;
  }

  &.disabled .slider,
  &.disabled .value {
    opacity: 0.5;
    pointer-events: none;
  }
}

.validation {
  padding: space(1) 0 0 space(1);
  position: relative;

  &.failed {
    color: var(--ui-error-color);
  }

  li {
    margin: space(1);
  }
}

.inline_help {
  @include background-icon-right($color: var(--ui-primary-color-lighter), $font-size: 16px);
  @include help-circled-icon;

  &:before {
    top: 5px;
    right: 3px;
    width: 20px;
    height: 17px;
    text-align: center;
    pointer-events: auto;
  }

  position: absolute;
  top: -7px;
  right: -6px;
  width: 30px;
  height: 0;
  overflow: hidden;
  pointer-events: none;

  padding-top: 32px;
  margin: 1px;

  &:hover {
    box-shadow: var(--ui-box-shadow);
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 12px;
    margin: 0;
    background: var(--ui-surface-color);
    border: solid 1px var(--ui-on-surface-color-lighter);
    border-radius: rounded(sm);
    width: 100%;
    height: auto;
    z-index: 3;
  }

  font-weight: normal;
  text-transform: none;
  font-size: 13px;
}

.configuration_editor a {
  text-decoration: underline;
}

.input-hidden_via_binding {
  display: none;
}

.input-disabled {
  button,
  select,
  input,
  textarea,
  label .name {
    opacity: 0.5;
  }
}