input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}
//
// Input helpers
//
.hide-selectize-dropdown-arrow {
  .selectize-control.single .selectize-input:after {
    display: none;
  }
}

.form-circle-item {
  // Mixin for help blocks
  padding: 0.5em 0.25em;
  border-radius: 1em;
  line-height: 0;
  cursor: pointer;
  color: $gray;
  font-size: 125%;
  text-decoration: none;
}

.below-input-help {
  @extend small;

  display: block;
  line-height: 1.5em;
  padding-bottom: 0.5em;
  color: $less-strong-font-color;
}

a.optional-form-block {
  cursor: pointer;
  color: $gray;

  &:hover {
    color: $link-color;
    text-decoration: none;

    .context-display-help {
      color: $link-color;
    }
  }
}

.context-display-help {
  @extend .form-circle-item;

  display: inline-block;
  background: #fff;
  border: 1px solid $form-well-border-color;
}

.hidden-other {
  margin-top: 0;
  display: none;

  &.unhidden {
    margin-bottom: 1.5rem;
    display: flex !important;
    flex-wrap: wrap;
  }
}

#email_check_message {
  cursor: pointer;

  @extend .form-control-feedback;

  display: none;
  padding: 0 0.75rem;

  // @extend .text-muted;
}

//
// Avatar uploader
//
.avatar-upload-wrapper,
.file-upload-wrapper {
  img {
    padding-bottom: $vertical-height;
  }

  label.file {
    display: block;
  }

  .file-custom {
    .file-upload-text {
      color: $less-strong-font-color;
    }

    &::after {
      content: "";
    }

    &::before {
      content: "Upload Photo";
      font-size: $btn-font-size;
      font-family: $header-font-family;
      font-weight: 400;
      font-style: normal;
      text-transform: uppercase;
      color: white;
      background: $green;
      border-color: $green;
    }
  }

  // Override the content display for files so it says file not photo
  &.file-upload-wrapper .file-custom::before {
    content: "Upload file";
  }
}

// Old Bootstrap-4 custom file upload css - https://github.com/twbs/bootstrap-rubygem/blob/0bbd14de56ef118c27a42aa89623cca5edeec94c/assets/stylesheets/bootstrap/_custom-forms.scss
// Classes changed and broke our useage at 2642b162208bacefa24e6d52a576546392289f46
// We're keeping old functionality and old classes ;)
.file {
  position: relative;
  display: inline-block;
  height: 2.5rem;
  cursor: pointer;
}

.file input {
  width: 100%;
  margin: 0;
  filter: alpha(opacity = 0);
  opacity: 0;
}

.file-custom {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #555;
  user-select: none;
  background-color: #fff;
  border: $input-btn-border-width solid #ddd;
  border-radius: 0.25rem;

  @include box-shadow(inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05));
}

.file-custom::after {
  content: "Choose file...";
}

.file-custom::before {
  position: absolute;
  top: -0.075rem;
  right: -0.075rem;
  bottom: -0.075rem;
  z-index: 6;
  display: block;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: #555;
  content: "Browse";
  background-color: #eee;
  border: $input-btn-border-width solid #ddd;
  border-radius: 0 0.25rem 0.25rem 0;
}

// Focus state
.file input:focus ~ .file-custom {
  @include box-shadow(0 0 0 0.075rem #fff, 0 0 0 0.2rem #0074d9);
}
