/**
 * For the full copyright and license information, please view the
 * docs/licenses/LICENSE.txt file that was distributed with this source code.
 */
//form
.form-control {
  &:hover {
    border-color: var(--#{$cdk}primary-800);
  }

  &:focus {
    outline: 2px solid var(--#{$cdk}blue-500);
    @include box-shadow(none);
  }
}

label {
  &,
  &.control-label {
    font-size: var(--#{$cdk}size-14);
    font-weight: 500;
    color: $main-color;
  }
}

label.control-label span.label-tooltip {
  padding: 0 5px;
  font-size: var(--#{$cdk}size-14);
  color: $main-color;
  text-decoration: none;
  border: none;
}

label.required::before {
  position: relative;
  font-size: var(--#{$cdk}size-14);
  line-height: var(--#{$cdk}size-12);
  color: var(--#{$cdk}red-500);
  content: "*";
}

select.input-tiny,
input[type="text"].input-tiny,
input[type="password"].input-tiny {
  width: 80px;
  @include float(left);
}

textarea {
  resize: none;
}

.form-control[disabled],
.form-control[readonly],
input[disabled][type="password"],
input[disabled][type="search"],
input[disabled][type="text"],
input[disabled][type="email"],
input[disabled][type="number"],
input[readonly][type="password"],
input[readonly][type="search"],
input[readonly][type="text"],
input[readonly][type="email"],
input[readonly][type="number"],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly],
fieldset[disabled] .form-control,
fieldset[disabled] input[type="password"],
fieldset[disabled] input[type="search"],
fieldset[disabled] input[type="text"],
fieldset[disabled] input[type="email"],
fieldset[disabled] input[type="number"],
fieldset[disabled] select,
fieldset[disabled] textarea {
  background-color: var(--#{$cdk}primary-200);
  border-color: var(--#{$cdk}primary-400);

  &:hover {
    background-color: var(--#{$cdk}primary-200);
    border-color: var(--#{$cdk}primary-400);
  }
}

textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  background-color: $input-focus-background;
  border-color: $input-border-focus;
  outline: 2px solid var(--#{$cdk}blue-500);
  @include box-shadow(none);
}

textarea:hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:focus,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover,
.uneditable-input:hover {
  background-color: $input-focus-background;
}

.help-block {
  color: var(--#{$cdk}primary-700);
}

//buttons
.dropdown-menu {
  @include text-align(left);
}

.btn-group-action {
  line-height: 0;

  .btn {
    font-family: $font-family-sans-serif;
  }

  .btn-group {
    white-space: nowrap;

    > a,
    button {
      display: inline-block;
      float: none;
      text-decoration: none;

      i {
        font-size: var(--#{$cdk}size-14);
      }
    }

    > a:first-child {
      @include margin-right(-3px);
    }
  }
}

.dummyfile {
  position: relative;

  .hide-file-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include opacity(0);
  }
  //typeahead
}

.tt-query {
  border-radius: 0;
}

.tt-dropdown-menu {
  font-size: 0.9em;
  text-transform: none;
  background-color: var(--#{$cdk}white);
  border: solid 1px var(--#{$cdk}primary-400);
}

.tt-suggestions {
  padding: 0 var(--#{$cdk}size-6);
  box-shadow: var(--#{$cdk}box-shadow-md);
}

.tt-suggestion p {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: solid 1px var(--#{$cdk}primary-400);
}

.tt-suggestion:last-child p {
  border-bottom: none;
}
//tag
.tagify-container {
  min-height: 30px;
  padding: 0 3px;
  overflow: auto;
  background-color: var(--#{$cdk}white);
  border: solid 1px var(--#{$cdk}primary-400);
  border-radius: 0;
  box-shadow: var(--#{$cdk}box-shadow-md);

  span {
    @include float(left);
  }

  > span {
    display: inline-block;
    padding: 2px 5px;
    margin: 3px;
    color: var(--#{$cdk}white);
    background-color: lighten($brand-primary, 15%);
    border: 1px solid $brand-primary;
    border-radius: 0;

    > a {
      font-weight: 700;
      color: $brand-primary;
      text-decoration: none;
      @include padding-left(5px);
    }
  }

  > input {
    width: 140px;
    height: auto;
    margin-top: 2px;
    border: 0 none;
    @include box-shadow(none);
  }

  > input:focus {
    outline: 0;
    @include box-shadow(none);
  }
}

.form-group {
  @media (max-width: $screen-lg) {
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
      margin: 4px 0;
    }

    .input-group {
      margin: 4px 0;

      input[type="text"],
      input[type="number"],
      input[type="search"],
      input[type="password"],
      textarea,
      select {
        margin: 0;
      }
    }
  }

  .input-group {
    &-btn {
      > .btn {
        height: $input-height-base;
      }
    }
  }

  .translatable-field {
    .btn.dropdown-toggle {
      height: $input-height-base;
      white-space: nowrap;
    }
  }
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"] {
  font-family: $url-font-content-name, Helvetica, Arial, $icon-font-family, sans-serif !important;
}


@media (min-width: $screen-sm-min) {
  .control-label {
    padding-top: 7px;
    padding-right: 25px;
  }
}

.form-horizontal {
  .form-wrapper {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
    padding: 14px 0;
    margin: auto;
  }

  .form-group {
    .btn[id^="add_condition_"] {
      white-space: nowrap;
    }
  }
}

.modal-checkbox {
  input {
    margin: 0;
    margin-right: 5px;
    vertical-align: middle;
  }

  label {
    margin-bottom: 0;
    vertical-align: middle;
  }
}

// Feedback states
.has-success {
  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}

.has-warning {
  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}

.has-error {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}