// https://github.com/lukehaas/css-loaders

$half_size: 16px;
$border_radius: 4px;

.igv-loading-spinner-container {

  z-index: 1024;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 2 * $half_size;
  height: 2 * $half_size;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  //background-color: $igv_apple_crayon_honeydew;

  >div {
    box-sizing: border-box;

    width: 100%;
    height: 100%;
    border-radius: 50%;

    //background-color: $igv_apple_crayon_strawberry;

    border: $border_radius solid rgba(128,128,128,.5);
    border-top-color: rgb(255,255,255);

    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;

  }
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}