@import "../variables/dimensions";
@import "../variables/colors";

$loader-padding: $grid-gutter-width * 2;
$loader-border: 1px  solid rgba($primaryColor, .5) !default;
$loader-color: lighten($primaryColor, 10%) !default;
$loader-shadow: 0 2px 5px rgba(0,0,0,.2);

.loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100%;
  cursor: wait;

  .loader-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    .loader {
      display: inline-block;
      background-color: $whiteColor;
      padding: $loader-padding;
      border: $loader-border;
      border-radius: $border-radius-large;
      box-shadow: $loader-shadow;

      .loader-content {
        margin-top: $grid-gutter-width;
        color: $loader-color;
        font-size: $font-size-small;
        line-height: 1;
      }
    }
  }
}

.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $zindex-tooltip + 1;
}