@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";

// Base
.prompt {
	z-index: 1;
	min-width: 100px;
	max-width: calc( 100vw - 20px );
	max-height: calc( 100vh - 20px );
	padding: px-to-rem( 23px, 25px );
	margin: 10px;
	border-radius: $border-radius;
	opacity: 0;
	transition: opacity .25s;
	box-shadow: $box-shadow-sm;
	background: $white;
}

.prompt-animated {
	opacity: 1;
}

.prompt-closable {
	padding-right: 30px;
}

.prompt-close {
	position: absolute;
	top: 5px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 15px 5px 10px;
	width: 25px;
	height: 25px;
	cursor: pointer;
	opacity: .5;
	transition: $transition-base;

	&::before {
		content: 'x';
	}

	&:hover {
		opacity: 1;
	}
}

.prompt-content {
	display: none;
}

.prompt-list {
	max-width: 300px;
}


// Modifiers
.prompt-top {
	@include cloud-item( 10px, top )
}

.prompt-bottom {
	@include cloud-item( 10px, bottom )
}

.prompt-left {
	@include cloud-item( 10px, left )
}

.prompt-right {
	@include cloud-item( 10px, right )
}

.prompt-unfit {
	&::before {
		content: none;
	}
}


// Desktop context
.desktop {
	.prompt-close {
		opacity: 0;
	}

	.prompt:hover {
		.prompt-close {
			opacity: .5;

			&:hover {
				opacity: 1;
			}
		}
	}
}