// (C) Copyright 2011-2013 Hewlett-Packard Development Company, L.P.

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

@-moz-keyframes spin {
  from {
  	-moz-transform: rotate(0deg);
	}
	to {
  	-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
  from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-o-keyframes spin {
  from {
  	-o-transform: rotate(0deg);
	}
	to {
  	-o-transform: rotate(360deg);
	}
}

.hp-spinner {
  width: 100%;
  color: $secondary-color;

  p {
    // fix for IE10 layout bug
    position: relative;
  }
  
  html.hp-high-contrast & {
    color: $projection-secondary-color;
  }
  
  > * {
    margin: 0px auto;
    text-align: center;
  }
  
  .hp-spinner-image {
    height: 35px;
    width: 35px;
    background: transparent;
    background-image: url($img-file);
    background-position: $spinner-x 0px;
    background-repeat: no-repeat;
    -webkit-animation: spin 3s infinite linear forwards 0.7s;
    -moz-animation: spin 3s infinite linear forwards 0.7s;
    -ms-animation: spin 3s infinite linear forwards 0.7s;
    -o-animation: spin 3s infinite linear forwards 0.7s;
    margin: 20px auto;
    
    .hp-global & {
      background-position: $spinner-x 0px;
    }
  }
}

.hp-spinner-small {
  display: inline-block;
  width: 17px;
  color: $secondary-color;
  
  html.hp-high-contrast & {
    color: $projection-secondary-color;
  }
  
  .hp-spinner-image {
    display: inline-block;
    height: 17px;
    width: 17px;
    background-image: url($img-file);
    background-position: $spinner-x -160px;
    background-repeat: no-repeat;
    -webkit-animation: spin 3s infinite linear forwards 0.7s;
    -moz-animation: spin 3s infinite linear forwards 0.7s;
    -ms-animation: spin 3s infinite linear forwards 0.7s;
    -o-animation: spin 3s infinite linear forwards 0.7s;
  }
}