@import '../styles/_shared';

.vui-avatar-selector {
	$root: &;
	position: relative;
	display: inline-block;
	overflow: hidden;

	&:focus-within {
		outline: 2px solid lightblue;
	}

	&--valid {
		#{$root}__hover {
			transform: none;
		}
	}

	&--drop-area {
		outline: 3px dotted #c7c7c7;
	}

	&__hover {
		position: absolute;
		height: 50%;
		width: 100%;
		left: 0;
		top: 100%;
		pointer-events: none;
		transition: transform 0.2s ease-in-out;
		z-index: 2;
		background: #f7f7f7 no-repeat center center;
	}

	& input[type="file"] {
		// required for drag and drop to work: input must be as
		// big as the avatar label:
		opacity: 0;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
	
		&:hover,
		&:active {
			& + #{$root}__hover {
				transform: translateY(-100%);
			}
		}
	}
}