@import '../definitions/variables';

.document-settings-plugin-add {
	overflow: visible;

	&__results {
		margin-top: 3em;
		padding: 1em 0 0;

		&--empty {
			background: $background-box;
			padding: 1em 1em 2em 1em;
		}
		&--empty .document-settings-plugin-add__animation--hidden:before {
			color: darken($background-box, 10);
		}
	}
	&__animation {
		position: relative;
		display: block;
		width: 1em;
		height: 1em;
		font-size: 4em;
		margin: 0 auto;
		overflow: hidden;

		&:before {
			display: block;
			margin: 0.1em 0 0 0.1em;
			font-size: 0.8em;
			color: darken($background-box, 10);
		}
		&--hidden:before {
			color: transparent;
		}
		&--active:before {
			animation: search 4s cubic-bezier(0.445, 0.050, 0.550, 0.950) both;
		}
	}

	&__empty {
		padding-top: 1em;
		text-align: center;

		&-title {
			display: block;
			text-align: center;
		}
		&-message {
			display: block;
			max-width: 24em;
			margin: 1em auto 2em;
			text-align: center;
			font-size: 0.8em;
			color: lighten($text, 20);
		}
	}
	&__list {
		margin-bottom: 4em;
	}
	&__item + &__item {
		margin-top: 1em;
	}
	&__button {
		display: block;
		text-decoration: none;

		width: 100%;
		padding: 10px;
		text-align: left;
		background: lighten($background-box, 2);
	}

	&__name,
	&__meta {
		display: block;
		max-width: calc(100% - 8em);
	}
	&__name {
		font-size: 1.1em;
		text-align: left;
	}
	&__meta {
		font-size: 0.9em;
		color: lighten($text, 20);
	}

	&__install {
		float: right;
		margin-top: 1em;
		padding: 0 1em;
		line-height: 1.6em;
		font-size: 0.8em;
		font-weight: bold;
		color: rgba($green, 0.8);
		border: 1px solid rgba($green, 0.6);
		border-radius: 4px;
	}
}


@keyframes search {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 0 100%;
	}
	10% {
		transform: rotate(2deg);
	}
	20%,
	40%,
	60% {
		transform: rotate(-4deg);
	}
	30%,
	50%,
	70% {
		transform: rotate(4deg);
	}
	80% {
		transform: rotate(-2deg);
	}
	90% {
		transform: rotate(2deg);
	}
}