@import (reference) './variables';
@import (reference) './mixins';

.hover-border-effect {
	position: relative;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: box-shadow 300ms ease;
	}
	&:hover::after {
		box-shadow: inset 0 0 0 3px #9013fe;
	}
}

.skeleton-loader {
	width: 100%;
	display: block;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0) 70%
		rgba(255, 255, 255, 0) 70%
	),
	lightgray;
	background-repeat: repeat-y;
	background-size: 50px 500px;
	background-position: 0 0;
	animation: shine 1s infinite;
}

@keyframes shine {
	to {
		background-position: 100% 0;
	}
}