@import '../../client/css/defaults';

.repository--collection-icon {
	position: relative;
	font-family: $font-default;
	width: $dimension-collection-icon;
	padding: 0.8em;
	border-radius: 0.25em;
	background-color: none;
	font-size: 0.75em;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0);
	animation: repository-collection-slide-up 0.4s ease;
	cursor: pointer;

	> button {
		padding: 0;
		font: inherit;
		background: none;
		border: none;
		cursor: pointer;
		width: 100%;
	}

	> a {
		text-decoration: none;
		color: black;
		font-weight: 600;

		.repository--collection-icon--menu-control-button {
			display: none;
		}
	}

	&.is-open {
		background-color: $color-banner-bg;
	}

	&:hover {
		border-color: $color-banner-bg;

		.repository--collection-icon--image {
			transform: translate(0, -2px);
		}

		.repository--collection-icon--menu-control-button {
			display: block;
		}
	}

	.repository--collection-icon--menu-control-button.is-visible {
		display: block;
	}
}

@keyframes repository-collection-slide-up {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}