// 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"></div>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon is-grey">
    <div class="CDB-LoaderIcon-item is-grey"></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-grey {
    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, $cWhite 10%, rgba($cWhite, 0) 42%);

  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
  }

  &::before {
    width: 50%;
    height: 50%;
    border-radius: 100% 0 0;
    background: $cMainLine;
  }
  &::after {
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    margin: auto;
    border-radius: 50%;
    background: $cWhite;
  }
  &.is-grey {
    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
    &::before {
      background: $cSecondaryText;
    }
    &::after {
      background: $cMainBg;
    }
  }
}


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