@charset "UTF-8";

// Core dependencies.
@import "_stylesheets/bb_variables";

// Import whole bootstrap library.
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

// Font awesome
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

// Import angular ui bootstrap styles.
@import "~angular-ui-bootstrap/dist/ui-bootstrap-csp";

// Main 3rd party components used by SDK (I am not sure if they should be in core module).
@import "~ui-select/dist/select";
@import "~spectrum-colorpicker/spectrum.css";

// Styles for project version widget, which is present on a client side.
@import "_stylesheets/project_version";

// #bb here is used to improve SDK styles precedence so that they can defeat default bootstrap or admin-lte stylesheets.
// It shouldn't be done this way though, but refactoring might be costly.
#bb {
  // General styles for SDK.
  @import "_stylesheets/bb_firefox";
  @import "_stylesheets/bb_general";
  @import "multiple-date-picker/multipleDatePicker";

  // Dump for some general styles (clearly not refactored, for instance [bb-admin-booking] shouldn't be here]).
  [pricepicker] {

    position: relative;

    input {
      padding-left: 22px;
    }

    span {
      position: absolute;
      padding: 7px 12px;
      pointer-events: none;
    }

  }

  img.loader {
    margin: auto;
    display: block
  }

  div.loader {
    margin: auto;
    display: block;
    background: url("./_images/BB_wait.gif");
  }

  .modal-content {
    div.loader {
      width: 100px;
      height: 100px;
    }
  }

  [bb-loading-spinner] {
    div.loader-wrapper {
      position: absolute;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: white;
      .loader {
        width: 100px;
        height: 100px;
      }
    }
  }

  .form-group.has-success .form-control[disabled],
  .form-group.has-success .form-control[readonly],
  .has-success .form-control[disabled],
  .has-success .form-control[readonly] {
    border-color: #EEE;

  }

  select.form-control[disabled]::-ms-expand,
  .form-group .form-control[disabled]::-ms-expand {
    display: none;
  }

  select.form-control[disabled],
  .form-group select.form-control[disabled] {
    -webkit-appearance: none;
    appearance: none;
  }

  #viewport_size {
    position: absolute;
    bottom: 0px;
    z-index: -1;
  }

  /**
   *  The BBAlert service sets the error alert using the css class 'alert-error'.
   *  That's wrong, because the css class used by Bootstrap is 'alert-danger'.
   *
   *  This patch provides compatibility but this logic should be changed
   */
  .alert-error {
    @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  }
}