@import "../common/variables_mixins";

.sc-uploader {
	display: flex;
	width: 92px;
	height: 92px;
	position: relative;
	border-radius: 50%;
	color: $text-color-primary;
	&-btn {
		display: flex;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: absolute;
		right: -8px;
		top: -8px;
		border-radius: 50%;
		@include elevation(2);
		background: $white;
		cursor: pointer;
		&-remove {
			left: -8px;
			right: auto;
		}
	}
	&-input {
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		left: 0;
		-webkit-appearance: none;
		opacity: 0;
		cursor: pointer;
	}
	&-preview {
		width: 92px;
		height: 92px;
		border-radius: 50%;
		overflow: hidden;
		background-color: material-color('grey', '300');
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			max-height: 92px;
		}
	}
}