//
// Bootstrap status
// -----------------------------------------------------------------------------------------------------------

// Form control feedback states
// ----------------------------
// .has-warning
// .has-error
// .has-success


// Toggling content
// ----------------
// .hide
// .show
// .invisible
// .text-hide


// .active
// .disabled
// [disabled]
// [readonly]

//
// LaxarJS status
// -----------------------------------------------------------------------------------------------------------

// LaxarJS also defines status classes. To use an unique class name pattern we map bootstrap status classes to LaxarJS ones.
.ax-show { @extend .show; }
.ax-hide { @extend .hidden; }
.ax-active { @extend .active; }
.ax-omitted { @extend .hidden; }
.ax-text-hide { @extend .text-hide; }
.ax-invisible { @extend .invisible; }

.ax-invisible {
   visibility: hidden !important;
}
.ax-busy {}
.ax-dragging {}
.ax-scrolling {}
.ax-not-scrolling {}

// See f.e. forms for concret implementing these classes

%font {
   font-size: inherit;
   font-weight: inherit;
}

[readonly],
.ax-readonly {
   // @extend %font;
   color: $ax-state-readonly-color !important;
   cursor: default !important;
}

[disabled],
.ax-disabled {
   @extend .disabled;
   // @extend %font;
   cursor: default !important;
   pointer-events: none;
   color: $ax-state-disabled-color !important;
}

.ax-error {
   // @extend %font;
   color: $ax-state-error-color !important;
}

select,
textarea,
input[type="text"] {

   &[readonly],
   &.ax-readonly {
      background: $ax-state-readonly-background;
      border-color: $ax-state-readonly-border-color;
   }

   &[disabled],
   &.ax-disabled {
      background: $ax-state-disabled-background;
      border-color: $ax-state-disabled-border-color;
   }

   &.ax-error {
      background: transparent;
      border-color: $ax-state-error-color;
   }
}

.table {
   .ax-error {
      color: $ax-state-error-color !important;
   }

   input[type="text"] {
      &[readonly],
      &.ax-readonly,
      &[disabled],
      &.ax-disabled {
         &,
         .ax-error {
            border-color: transparent !important;
         }
      }
   }
}