/* Animations */

@-webkit-keyframes fadeIn {
  from { opacity: 0.3; }
}
@-moz-keyframes fadeIn {
  from { opacity: 0.3; }
}
@-ms-keyframes fadeIn {
  from { opacity: 0.3; }
}
@-o-keyframes fadeIn {
  from { opacity: 0.3; }
}
@keyframes fadeIn {
  from { opacity: 0.3; }
}

@mixin animate($anim) {
	-webkit-animation: $anim;
	-moz-animation: $anim;
	-ms-animation: $anim;
	-o-animation: $anim;
	animation: $anim;
}

.flicker {
    @include animate(fadeIn 0.5s infinite alternate);
}

@mixin rounded($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

@mixin drop-shadow($opacity) {
	filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
	-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
}

@mixin no-text-overflow() {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

@keyframes spotlogo {
    0% {
        transform: scale(1);
    }
    1.25% {
        transform: scale(1.2);
    }
    2.5% {
        transform: scale(1);
        transform:rotate(0deg);
    }
    5% {
        transform:rotate(360deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

/* Common objects */

*:focus {
	outline: 0px none transparent;
}

textarea:focus, input:focus {
	outline: 1px solid #CCC;
}

body, textarea, input, button, a.button {
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	margin: 0;
}

textarea {
	resize: none;
}

a.button {
	text-decoration: none;
	display: inline-block;
}

button, a.button {
	cursor: pointer;
	font-weight: bold;
	color: #000;
	background: #eee;

	&:hover {
		color: #eee;
		background: #000;
	}
}

input, textarea, button, a.button {
	border: none;
	padding: 0.5em 1em;
	border-radius: 3px;
}

h1 {
	font-size: 2em;
	font-weight: bold;
	margin: 1em 0 0.5em;
}

/* Feedback */

.feedback {
	p {
		margin: 0 0 1em 0;
		&.error {
			color: red;
		}
		&.warning {
			color: orange;
		}
		&.success {
			color: green;
		}
	}
}