/* ==========================================================================
   Spinner.
   ========================================================================== */
:root {
  --spinner-bg-color: var(--color-fg-primary);
}

.spinner--overlay {
  position: relative;
}

.spinner-wrapper {
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  pointer-events: none;

  .is-loading & {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==========================================================================
   Overlay
   ========================================================================== */
.spinner--inline,
.spinner--overlay {
  .spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .spinner-wrapper-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    padding: 15px;
    margin: -30px;
    width: 18px;
    height: 18px;
    box-shadow: 0 4px 15px rgba(#000, .25);
  }

  &.l-spinner {
    .spinner-wrapper-inner {
      background: no-repeat center var(--spinner-bg-color);
      border-radius: 50%;
    }

    &.is-loading {
      .spinner-wrapper-inner {
        background-image: url("../../images/spinner.svg");
      }
    }
  }
}

/* ==========================================================================
   Inline.
   ========================================================================== */
.spinner--inline {
  position: relative;

  .spinner-wrapper {
    position: absolute;
    top: 40px;
    bottom: auto;
  }

  .spinner-wrapper-inner {
    box-shadow: none;
  }

  &.l-spinner {
    .spinner-wrapper-inner {
      background: no-repeat center var(--spinner-bg-color);
      border-radius: 50%;
    }

    &.is-loading {
      .spinner-wrapper-inner {
        background-image: url("../../images/spinner.svg");
      }
    }
  }

  /* Dataviz.
     ========================================================================== */
  &.js-dataviz-render {
    .view-empty {
      padding-top: 80px;
      padding-bottom: 20px;
    }
  }
}

/* ==========================================================================
   Button.
   ========================================================================== */
.spinner--button {
  &.l-spinner .spinner-wrapper {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: block;
    width: 24px;
    height: 24px;
    background: url("../../images/spinner.svg") no-repeat;
    background-size: 100% auto;
    transition: .3s;
  }

  &.is-loading {
    padding-left: 44px;
  }
}