calc.scss

// Colores
$base_color:#FFC0CB;

$input_color: #EEEEEE;
$input_shadow_color: #D76D88;
$input_text_color: #968484;

$btn_color: #FCD9A6;
$btn_active_color: #F9CE8F;
$btn_border_color: #FFFFFF;
$btn_text_color: #FFFFFF;

// Utilidades
%box-sizing-el{
	box-sizing: border-box;
	font-family: 'sans-serif';
}

// Inicio
.calculadora{
	position: fixed;
	right: 40px;
	bottom: 20px;
	display: inline;
	min-width: 65px;
	min-height: 60px;
	transform-origin: top;
	transition-duration: 0.01s;
	z-index: 100;
	@extend %box-sizing-el;
}

.calculadora :not(.calc__btn--open-icon):not(.calc__btn--sign-delete){
	@extend %box-sizing-el;
}

.calc__btn--sign-delete{
	box-sizing:border-box;
}

.calculadora *:focus{
	outline: none;
}

.calc{
	background-color: $base_color;
	width: 340px;
	height: 280px;
	display: grid;
	grid-template-rows: 1fr 3fr;
	grid-template-columns: 4fr 1fr;
	padding: 20px;
	border-radius: 20px;
	position:absolute;
	bottom: 80px;
	right: 0px;
	max-height: 100vh;

	&__header{
		position: relative;
		height: 80%;
	}

	&__total{
		position:absolute;
		top:0px;
		right: 10px;
		height: 100%;
		display: block;
		display:flex;
		align-items: center;
		font-size: 1.4rem;
		max-width: 50%;
		overflow: auto;
		text-align: right;
	}

	&__input{
		width: 100%;
		height: 100%;
		border: none;
		padding-right: 30%;
		border-radius: 10px;
		color: $input_text_color;
		font-size: 1rem;

		&:disabled{
			background-color: $input_color;
			box-shadow: inset 0px 0px 3px 0.5px $input_shadow_color;
		}
	}

	&__body {
		grid-column: 1/2;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 10px;
		grid-row-gap: 5px;
	}

	&__aside{
		grid-row: 1/3;
		grid-column: 2/3;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 5px;
		max-width: 100%;
	}

	&__btn--sign{
		min-width: 100%;
		margin-left: 5px;
	}

	&__btn{
		background-color: $btn_color;
		border: 1px outset $btn_border_color;
		color: $btn_text_color;
		border-radius: 5px;
		padding: 5px;
		cursor: pointer;

		&:active{
			border:1px inset $btn_border_color;
			background-color: $btn_active_color;
		}

		&--zero{
			grid-column: 2/3;
		}
	}

	&__btn--open{
		background-color: $base_color;
		position:absolute;
		right: 0px;
		bottom:0px;
		min-width: 60px;
		min-height: 60px;
		border-radius: 100%;
		display:flex;
		justify-content:center;
		align-items: center;
		font-size: 2rem;
		color: $btn_color;
		cursor: pointer;
		border:none;

		&-icon{
			text-shadow: 1px 2px 2px #90758F; 		
		}
	}


}

.calc-fade-enter-active{
	transition-duration: .3s;
	overflow:hidden;
}

.calc-fade-leave-active {
	transition-duration: .5s;
	overflow:hidden;
}

.calc-fade-enter, .calc-fade-leave-to{
	bottom:0px;
	max-height: 0vh;
	opacity: 0;
}