.form-control {
  box-shadow: none;
  color: $text-color;
  height: $form-control-height;
  border-color: $input-border;
  padding: 4px 8px;

  &[readonly] {
    background-color: $form-control-readonly-background-color;
    border-color: $form-control-readonly-border-color;
    color: $form-control-readonly-color;

    & + .input-group-addon {
      background-color: $form-control-readonly-background-color;
      border-color: $form-control-readonly-border-color;
      color: $form-control-readonly-color;
      cursor: auto;
    }
  }

  &.input-success {
    border-color: $color-success;

    &:focus {
      border-color: $color-success;
      box-shadow: $outline-box-shadow rgba($color-success, $outline-border-opacity);
    }
  }

  &.input-warning {
    border-color: $color-warning;

    &:focus {
      border-color: $color-warning;
      box-shadow: $outline-box-shadow rgba($color-warning, $outline-border-opacity);
    }
  }

  &.input-danger {
    border-color: $color-danger;

    &:focus {
      border-color: $color-danger;
      box-shadow: $outline-box-shadow rgba($color-danger, $outline-border-opacity);
    }
  }

  &[disabled] {
    background-color: $form-control-disabled-background-color;
    border-color: $form-control-disabled-border-color;
    color: $form-control-disabled-color;

    & + .input-group-addon {
      background-color: $form-control-disabled-background-color;
      border-color: $form-control-disabled-border-color;
      color: $form-control-disabled-color;
      cursor: not-allowed;
    }
  }

  &.input-validation-error {
    border-color: $validation-error !important;

    & + .input-group-addon {
      border-color: $validation-error !important;
    }
  }

  &:focus {
    outline: 0;
    border-color: $form-control-focus-border-color;
    box-shadow: $outline-box-shadow rgba($form-control-focus-border-color, $outline-border-opacity);
  }
}

.element-status-icon-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.element-status-icon {
  position: absolute;

  &.loading {
    background: url('/Content/images/spinner.svg') no-repeat right 8px center;
    background-size: 20px;
  }

  &.success {
    background: url($base-icon-path + 'success-dark.svg') no-repeat right 8px center;
    background-size: 20px;
    cursor: text;
  }

  &.warning {
    background: url($base-icon-path + 'warning-dark.svg') no-repeat right 8px center;
    background-size: 20px;
    cursor: text;
  }

  &.error {
    background: url($base-icon-path + 'danger-dark.svg') no-repeat right 8px center;
    background-size: 20px;
    cursor: text;
  }

  &.element-type-button {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center;
  }

  &.updating-checkbox {
    background-position: left center;
    background-size: 15px;
    height: 15px;

    left: 0;
    margin-left: -5px;
    margin-top: 3px;

    width: 15px;

    &.updating-switch {
      margin-left: -5px;
      margin-top: 6px;
    }
  }
}

.input-group {

  border-radius: $border-radius-base;

  &:focus, &.focus {
    outline: 0;
    border-color: $form-control-focus-border-color;
    box-shadow: $outline-box-shadow rgba($form-control-focus-border-color, $outline-border-opacity);
  }


  .form-control {
    &:first-child {
      border-right: 0;
      padding-right: 0;
    }

    &:not(:first-child) {
      border-left: 0;
      padding-left: 0;
    }

    &:focus {
      outline: 0;
      box-shadow: none;
    }
  }
  
  .input-group-addon {
    background-color: $color-white;
  }
}

.field-validation-error {
  color: $validation-error;
}

input:placeholder-shown {
    text-overflow: ellipsis;
}