$textarea-optional-color  : $optional-color !default;  // <-- this is a bootstrap default
$textarea-focused-color   : $focused-color !default;
$textarea-disabled-color  : $disabled-color !default;
$textarea-required-color  : $required-color !default;
$textarea-invalid-color   : $invalid-color !default;

jb-textarea {
  .jb-textarea-form-group {
    margin-bottom: 15px;
    position: relative; // Set it as a container for the internal relatives

    label {
      font-weight: 700;
      margin-bottom: 2px;

      .info-badge {
        display: inline-block;
        margin-right: 7px;
        cursor: pointer;
      }
      .asterisk {
        margin-left: 3px;
      }
    }

    textarea.form-control {
      max-height: 350px;
      font-size: 14px;
      &:focus {
        outline: 0;
        box-shadow: none;  // Remove it from Bootstrap
      }
    }

    &.is-disabled {
      textarea.form-control {
        cursor: not-allowed;
      }
    }

    &.is-error {
      // Error message on the top right
      .jb-textarea-error-text {
        font-size: 11px;
        position: absolute;
        &.pull-up { top: -23px; } // If no label, pull message up above the box

        // errorPosition:
        &.none { display: none; } // Hide error text

        &.default { // Default error position:
          @media (min-width: 767px) { right: 5px; padding-top: 3px; } // Default > xs = Top right
          @media (max-width: 768px) { bottom: -20px; right: 5px; }    // Default xs = Bottom right
        }
        &.top-right { right: 5px; padding-top: 3px; }
        &.bottom-left  { bottom: -20px; left: 5px; }
        &.bottom-right { bottom: -20px; right: 5px; }
      }

      // If error text at the bottom, add extra margin
      &.error-bottom { margin-bottom: 30px; }
      @media (max-width: 768px) { &.error-default { margin-bottom: 30px; } } // Small default goes to the bottom too
    }

  }




  // Styles applied to the host (wrapper instance element) <jb-input>
  &.flat { .jb-textarea-form-group { margin-bottom: 0; } }


  &.resize { textarea { resize: none; } }
}




// --- Color layer -----------------------------------------------------------------------------------
jb-textarea .jb-textarea-form-group {
  label { transition-property: color; transition-duration: 0.2s; }
  textarea.form-control {
    border: 1px solid $textarea-optional-color;
    //box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    //&:focus { box-shadow: 0 0 0 2px rgba($focused-color, 0.35); }
  }

  &.is-disabled {
    label { color: $textarea-disabled-color }
    textarea.form-control { color: $textarea-disabled-color; }
  }

  &.is-required {
    label { color: $textarea-required-color; }
    textarea.form-control { border-color: $textarea-required-color; }
    //&:focus { box-shadow: 0 0 0 2px rgba($textarea-required-color, 0.20); }
  }

  &.is-focus {
    label { color: $textarea-focused-color; }
    textarea.form-control { box-shadow: none; border: 1px solid $textarea-focused-color; }
  }

  &.is-error {
    label { color: $textarea-invalid-color; }
    textarea.form-control {
      border-color: $textarea-invalid-color;
      //&:focus { box-shadow: 0 0 0 2px rgba($textarea-invalid-color, 0.20); }
    }
    .jb-textarea-error-text {
      color: $textarea-invalid-color;
    }
  }




}