input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea {
  padding: $input-btn-padding-y $input-btn-padding-x;
  color: $input-color;
  border: $input-btn-border-width solid $input-border-color;
  border-radius: $input-border-radius;
  background: $input-bg;
  font-size: $font-size-base;
  line-height: $input-btn-line-height;

  &:focus {
    border-color: $input-focus-border-color;
    outline: 0;
  }

  &:disabled {
    background: $input-disabled-bg;
  }

  &::placeholder {
    color: $input-placeholder-color;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    opacity: 1;
  }
}

textarea {
  line-height: 19px;
}

.fullwidth {
  width: 100%;
}

label {
  font-size: inherit;
  
  &.required:after {
    content: " *";
  }

  input[type="radio"],
  input[type="checkbox"] {
    margin-right: 0.25rem;
  }
}

.label-block label { display: block }

input[type="submit"],
input[type="button"],
button,
.button {
  &:not(.close):not([class*="btn"]) {
    // We want to apply the primary button coloring to all buttons that do not
    // currently use the Bootstrap class naming convention (`btn`).
    //
    // In order to avoid the clashing between using `:not(.btn)` and
    // `@extend .btn` we need to use an attribute selector of `[class*="btn"]`.
    @extend .btn;
    background: linear-gradient($color-white, lighten($color-light-dark, 2%));
    color: $color-dark;
    border-color: $color-dark-accent;
    
    &:hover {
      background: linear-gradient($color-white, $color-light-dark);
      color: $color-primary;
    }
    
    &.disabled,
    &:disabled {
      color: $color-disabled;
    }
  }

  &:before {
    font-weight: normal !important;
  }

  &.fullwidth {
    width: 100%;
    text-align: center;
  }
}

span.info {
  font-size: 85%;
  color: lighten($body-color, 15);
  display: block;
  line-height: 20px;
  margin: 5px 0;
  .field & {
    font-style: italic;
  }
}

.field {
  padding: 10px 0;

  &.checkbox {
    min-height: 5.9rem;
    display: flex;
    align-items: center;

    input[type="checkbox"] {
      display: inline-block;
      width: auto;
    }

    label {
      cursor: pointer;
      margin-top: 2.25rem;
    }
  }
  
  label {
    font-size: $label-font-size;
  }

  ul {
    list-style: none;
    margin: 0.5rem 0;
    padding-left: 0;

    li {
      display: inline-block;
      padding-right: 1rem;

      label {
        font-weight: normal;
        text-transform: none;
        margin-bottom: 0;
      }

      &.white-space-nowrap {
        white-space: nowrap;
      }
    }
  }

  .field_with_errors {
    label {
      color: theme-color("danger");
    }

    input {
      border-color: theme-color("danger");
    }
  }

  &.withError {
    .formError {
      color: lighten(theme-color("danger"), 15);
      font-style: italic;
      font-size: 85%;
    }
    .select2-container {
      border-radius: 4px;
      border: 1px solid theme-color("danger");
    }
  }
}

fieldset {
  border: 1px solid $color-border;
  position: relative;
  margin-bottom: 35px;
  padding: 10px 0 15px 0;
  border-left: none;
  border-right: none;

  &.no-border-bottom {
    border-bottom: none;
  }

  &.no-margin-bottom {
    margin-bottom: 0;
  }

  &.no-border-top {
    border-top: none;
    padding-top: 0;
  }

  legend {
    color: $color-dark;
    font-size: 14px;
    font-weight: $font-weight-bold;
    text-align: center;
    padding: 8px 15px;
    width: auto;
    margin-left: auto;
    margin-right: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    i {
      color: $link-color;
    }
  }

  .filter-actions {
    margin-bottom: -32px;
    margin-top: 15px;
    text-align: center;

    form {
      display: inline-block;
    }

    button, .button, input[type="submit"], input[type="button"] {
      box-shadow: 0 0 0 15px $body-bg;
    }

    // Always make sure the choices at the bottom of a fieldset are spaced out
    > * + * {
      margin-left: 2em;
    }
  }
}

.form-actions {
  margin-top: 18px;
}
.form-buttons {
  text-align: center;
}
