@import '../styles/_colors';

.vui-spinner{
	$root: &;
  padding:15px 2px 3px;
	display: flex;
	align-content: center;
	justify-content: center;
	
	&__label {
		display: flex;
		align-items: center;
	}

	&[data-label-position=right] {
		justify-content: flex-end;
		
		& #{$root}-container {
			margin: 0;
		}

		& #{$root}__label {
			margin-left: 1em;
		}
	}

	&[data-label-position=bottom] {
		flex-direction: column;

		& #{$root}__label {
			text-align: center;
			justify-content: center;
		}
	}

	&[data-label-position=top] {
		flex-direction: column;

		& #{$root}__label {
			order: -1;
			text-align: center;
			justify-content: center;
		}
	}

  &[data-speed=stop]{
    .vui-spinner-fragment{
      animation-play-state:paused;
    }
  }
  &[data-speed=slow]{
    .vui-spinner-fragment--air{
      animation-duration:3s;
    }
    .vui-spinner-fragment--land{
      animation-duration:2.75s;
    }
    .vui-spinner-fragment--sea{
      animation-duration:2.5s;
    }
  }
  &[data-speed=fast]{
    .vui-spinner-fragment--air{
      animation-duration:1s;
    }
    .vui-spinner-fragment--land{
      animation-duration:0.75s;
    }
    .vui-spinner-fragment--sea{
      animation-duration:0.5s;
    }
  }
  &[data-speed=superfast]{
    .vui-spinner-fragment--air{
      animation-duration:0.75s;
    }
    .vui-spinner-fragment--land{
      animation-duration:0.5s;
    }
    .vui-spinner-fragment--sea{
      animation-duration:0.25s;
    }
  }
  &[data-air=true]{
    .vui-spinner-fragment--air{
      display:block;
      animation-name:vui-spinner-animation-air;
    }
  }
  &[data-land=true]{
    .vui-spinner-fragment--land{
      display:block;
      animation-name:vui-spinner-animation-land;
    }
  }
  &[data-sea=true]{
    .vui-spinner-fragment--sea{
      display:block;
      animation-name:vui-spinner-animation-sea;
    }
  }
}
.vui-spinner-container{
  position:relative;
  margin:auto;
  width:220px;
  height:220px;
}
.vui-spinner-fragment{
  position:absolute;
  border-radius:50%;
  display:none;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
.vui-spinner-fragment--air{
  top: 0;
  animation-duration:1.25s;
}
.vui-spinner-fragment--land{
  animation-duration:1s;
}
.vui-spinner-fragment--sea{
  animation-duration:0.75s;
}

@keyframes vui-spinner-animation-air{
  0% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(360deg); 
  }
}
@keyframes vui-spinner-animation-land{
  0% {
    transform: rotate(120deg); 
  }
  100% {
    transform: rotate(480deg); 
  }
}
@keyframes vui-spinner-animation-sea{
  0% {
    transform: rotate(240deg); 
  }
  100% {
    transform: rotate(600deg); 
  }
}