@import "variables";

.pf-spinner-loading {
    position: absolute;
    left: calc(50% - 35px);
    top: calc(50% - 25px);

    border-bottom: 6px solid transparentize($pf-spinner-colour, 0.8);
	border-left: 6px solid transparentize($pf-spinner-colour, 0.8);
	border-right: 6px solid transparentize($pf-spinner-colour, 0.8);
	border-top: 6px solid transparentize($pf-spinner-colour, 0.1);
	border-radius: 100%;
    height: 50px;
    width: 50px;

    @include animation('pf-spinner-rotate 1s infinite linear');

    &.hidden {
        display: none;
    }
}

.pf-spinner-wrapper {
    &.hidden {
        display: none;
    }
    
    .pf-spinner-message {
        color: white;
        text-shadow: 1px 1px 1px black;
        position: absolute;
        top:63%;
        text-align: center;
        width: 100%;
        
        &.hidden {
            display: none;
        }
    }
}

@include keyframes(pf-spinner-rotate) {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}