// Loader styles
// ----------------------------------------------

/* SG
# Loader/principal

This is the generic loader for widgets, maps, components, ...

```
<div class="CDB-Loader is-visible"></div>
```
*/

@import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';

.CDB-Loader {
  @include css3-prefix(animation, loader-progress 1000ms linear 1);
  @include opacity(0);
  @include transition(opacity, 1000ms);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(#3AA9E3, 1);
  z-index: 10;
}
.CDB-Loader.is-visible {
  @include css3-prefix(animation, loader-progress 2000ms linear infinite);
  @include opacity(1);
}

@include keyframes(loader-progress) {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* SG
# Loader/circle

```
<div style="padding: 20px;">
  <div class="CDB-LoaderIcon">
    <div class="CDB-LoaderIcon-item">
      <span class="CDB-LoaderIcon-itemClose"></span>
      <span class="CDB-LoaderIcon-itemCircle"></span>
    </div>
  </div>
</div>

<div style="padding: 20px; background: #F9F9F9;">
  <div class="CDB-LoaderIcon is-grey">
    <div class="CDB-LoaderIcon-item">
      <span class="CDB-LoaderIcon-itemClose"></span>
      <span class="CDB-LoaderIcon-itemCircle"></span>
    </div>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon is-dark">
    <div class="CDB-LoaderIcon-item">
      <span class="CDB-LoaderIcon-itemClose"></span>
      <span class="CDB-LoaderIcon-itemCircle"></span>
    </div>
  </div>
</div>

<div style="padding: 20px; background: #E27D61;">
  <div class="CDB-LoaderIcon is-bg">
    <div class="CDB-LoaderIcon-item">
      <span class="CDB-LoaderIcon-itemClose" style="background: #E27D61"></span>
      <span class="CDB-LoaderIcon-itemCircle" style="background: #E27D61"></span>
    </div>
  </div>
</div>

```
*/

.CDB-LoaderIcon {
  box-sizing: border-box;
  position: relative;
  width: $baseSize * 2;
  height: $baseSize * 2;
  border: 2px solid $cMainLine;
  border-radius: 50%;
  &.is-bg {
    border: 2px solid rgba($cWhite, 0.9);
  }
  &.is-dark {
    border: 2px solid $cSecondaryText;
  }
}

.CDB-LoaderIcon-item {
  @include css3-prefix(animation, loader-icon 1.4s linear infinite);
  position: absolute;
  top: -2px;
  left: -2px;
  width: $baseSize * 2;
  height: $baseSize * 2;
  border-radius: 50%;
  background: linear-gradient(to right, rgba($cWhite, 0.1) 10%, rgba($cWhite, 0) 42%);

  &.is-dark {
    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
  }
}

.CDB-LoaderIcon-itemCircle {
  display: inline-block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 75%;
  height: 75%;
  margin: auto;
  border-radius: 50%;
}

.CDB-LoaderIcon-itemClose {
  position: absolute;
  top: -2px;
  left: 0;
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0;
}

.CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon-itemClose {
  background: $cWhite;
}

.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-itemClose {
  background: $cMainBg;
}

.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
  background: $cThirdBackground;
}

@include keyframes(loader-icon) {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}