$easingType: cubic-bezier(0.4, 0.0, 0.2, 1);

.cs-uwac__popup-wrapper{
	// Scaffold Variables
	--cs-uwac-button-height: 56px;
	--cs-uwac-button-margin: 14px;
	--cs-uwac-header-height: 104px;
	--cs-uwac-widget-margin-top-initial: 	20px;
	--cs-uwac-widget-margin-bottom-initial: 20px;
	--cs-uwac-widget-maxheight: calc(100vh - (var(--cs-uwac-button-height) + var(--cs-uwac-button-margin)));
	--cs-uwac-chatbox-bg: var(--cs-uwac-theme_content-bg,white);

	width: 350px;
	max-width: calc(100% - 50px);
	height: auto;
	max-height: var(--cs-uwac-widget-maxheight);
	pointer-events: none;
	position: fixed;
	top: 	var(--cs-uwac-theme_position-top, initial);
	right: 	var(--cs-uwac-theme_position-right, 20px);
	bottom: var(--cs-uwac-theme_position-bottom, 20px);
	left: 	var(--cs-uwac-theme_position-left, initial);


	transition: all 0.6s $easingType;
	z-index: 10000000;
	
	// Variables
	--uwac-btn-icon-display: flex;


	padding-bottom: 70px;
	
	*{
		user-select: none;
		box-sizing: border-box;
	}
	a,
	strong{
		color: currentColor;
	}


	// Widget Active State
	&.cs-uwac__active{
		.cs-uwac__popup-overlay{
			pointer-events: initial;
			opacity: 1;
			visibility: visible;
		}
	}
	

	// Position Styles
	&.cs-uwac__position--bottomright{
		--cs-uwac-widget-margin-top: 20px;
		--cs-uwac-widget-margin-bottom: var(--cs-uwac-theme_position-bottom);
		--cs-uwac-widget-maxheight: calc(100vh - var(--cs-uwac-widget-margin-top));
	}
	
	&.cs-uwac__position--bottomleft{
		--cs-uwac-widget-margin-top: 20px;
		--cs-uwac-widget-margin-bottom: var(--cs-uwac-theme_position-bottom);
		--cs-uwac-widget-maxheight: calc(100vh - var(--cs-uwac-widget-margin-top));
		
		// Widget Button
		.cs-uwac__popup-btn{
			top: initial;
			right: initial;
			bottom: 0px;
			left: 0px;
			flex-flow: row-reverse;
		}
	}
	

	// Hide Widget Button Label
	&.cs-uwac__popup--hide-label{
		.cs-uwac__popup-btn{
			.cs-uwac__popup-btn_txt{
				display: none !important;
			}
		}
	}
	

	// GDPR Ready
	&.cs-uwac__popup--gdpr-ready{
		.cs-uwac__popup-chatbox_notice-gdpr{
			display: none;
			visibility: hidden;
			opacity: 0;
		}
	}
	
	
	/**
	 * Widget Button
	 */
	.cs-uwac__popup-btn{
		position: relative;
		z-index: 10;
		
		.cs-uwac__popup-btn_icon{
			.cs-uwac__popup-btn_icon-icon{
				position: absolute;

				span{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					color: currentColor;
					fill: currentColor;

					svg{
						fill: currentColor;
						color: currentColor;
						width: 100%;
						height: 100%;
					}
				}
			}
			.cs-uwac__popup-btn_icon-close{
				position: absolute;

				span{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					color: currentColor;
					fill: currentColor;

					svg{
						fill: currentColor;
						color: currentColor;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.cs-uwac__popup-btn_txt{
			
		}
	}
	
	/**
	 * Widget Chat Box
	 */
	.cs-uwac__popup-chatbox{
		position: relative;
		z-index: 10;
		
		// Popup Heading
		.cs-uwac__popup-chatbox_heading{

			.cs-uwac__popup-chatbox_wazap-icon{

				span{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					color: currentColor;
					fill: currentColor;
				}
			}
			
			.cs-uwac__popup-chatbox_title{
				
			}
			.cs-uwac__popup-chatbox_intro{
				
			}
		}
				
		// Chatbox Content
		.cs-uwac__popup-chatbox_content{
			--cs-uwac-chatbox-height: calc(var(--cs-uwac-header-height) + var(--cs-uwac-widget-margin-top,var(--cs-uwac-widget-margin-top-initial)) + var(--cs-uwac-widget-margin-bottom,var(--cs-uwac-widget-margin-bottom-initial)) + var(--cs-uwac-button-height) + var(--cs-uwac-button-margin));

			overflow: scroll;
			height: calc(100% - 100px);
			max-height: calc(100vh - var(--cs-uwac-chatbox-height));
			/* 
			Los 240px o --cs-uwac-chatbox-height se calcularon asi:
			- 56px => alto del boton circular
			- 20px => margin-top del popup
			- 20px => margin-bottom del popup
			- 104px => alto del header del popup
			- --cs-uwac-wrapperpadding => position personalizada del popup
			- 14px => de margen entre el boton y el popup calculado restando el padding de 70px - 56px
			*/
			
			// Response Time Notice
			.cs-uwac__popup-chatbox_notice{
				
			}
			
			// GDPR Notice
			.cs-uwac__popup-chatbox_notice-gdpr{
				
				&--accepted{

				}
				&--error{

				}
				
				label{
					
					input{

					}
				}
			}
			
			// Accounts List
			.cs-uwac__popup-chatbox_content-list{
				padding-bottom: 20px;
				margin-bottom: -20px;
				
				.cs-uwac__popup-chatbox_content-item{
					
					// User Account
					.cs-uwac__popup-account{

						// User Avatar
						.cs-uwac__popup-account_avatar{
							
							&.cs-uwac__popup-account_avatar-img-avatar{

							}
							
							&.cs-uwac__popup-account_avatar-no-avatar{

							}

							// WhatsApp Icon
							.cs-uwac__popup-account_avatar-wazap-icon{
								display: none;

								span{
									width: 100%;
									height: 100%;
									position: relative;
									display: flex;
									align-items: center;
									justify-content: center;
									color: currentColor;
									fill: currentColor;
								}
							}

							.cs-uwac__popup-account_avatar-img{
								width: 100%;
								height: 100%;
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;

								// Placeholder Account Name Acronym
								&::before{
									content: attr(data-placeholder);
									position: absolute;
									top: 0px;
									left: 0px;
									right: 0px;
									bottom: 0px;
									background: white;
									color: var(--cs-uwac-account-status);
									display: flex;
									align-items: center;
									justify-content: center;
									z-index: 0;
									font-size: 16px;
								}
								
								// Imagen
								> img{
									width: 100%;
									height: 100%;
									object-fit: cover;
									position: relative;
									z-index: 1;
								}

								// No imagen muestra icono WhatsApp
								span{
									width: 100%;
									height: 100%;
									position: relative;
									display: flex;
									align-items: center;
									justify-content: center;
									color: currentColor;
									fill: currentColor;
								}
							}
						}
	
						// User Account Content
						.cs-uwac__popup-account_content{
							display: flex;
							flex-flow: column;
							align-items: flex-start;
							justify-content: center;
							width: 100%;
							min-height: 48px;
	
							.cs-uwac__account_name{
								font-size: 14px;
								color: #363c47;
								line-height: 1.188em !important;
							}
							.cs-uwac__account_label{
								font-size: 11px;
								color: #989b9f;
								padding: 2px 0 0;
								line-height: 1.125em !important;
							}
							.cs-uwac__account_status{
								color: rgb(255,255,255);
								font-size: 10px;
								padding: 5px 0 0;
								line-height: 1.125em !important;
								border-radius: 4px;
								background-color: var(--cs-uwac-account-status);
								padding: 3px 6px;
								display: inline-flex;
								margin-top: 3px;
							}
						}


						// WhatsApp Icon
						.cs-uwac__popup-account_wazap-icon{
							display: none;

							span{
								width: 100%;
								height: 100%;
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;
								color: currentColor;
								fill: currentColor;
							}
						}
					}

				}
			}
		}
		.cs-uwac__popup-chatbox_content_left{

		}
	}

	/**
	 * Widget Overlay
	 */
	.cs-uwac__popup-overlay{
		position: fixed;
		background: transparent;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s $easingType;
	}
}



.cs-uwac__account-button-wrapper{

	a.cs-uwac__button-account{
		
		// User Avatar
		.cs-uwac__button-account_avatar{

			&:not(.cs-uwac__button-account_avatar--no-avatar){
				
				.cs-uwac__button-account_avatar-img{
					// Placeholder Account Name Acronym
					&::before{
						content: attr(data-placeholder);
						position: absolute;
						top: 0px;
						left: 0px;
						right: 0px;
						bottom: 0px;
						background: white;
						color: var(--cs-uwac-account-status);
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 0;
						font-size: 24px;
						border-radius: inherit;
					}
				}
			}
	
			.cs-uwac__button-account_avatar-img{
				position: relative;

				// Avatar Image
				> img{
					width: 100%;
					height: 100%;
					object-fit: cover;
					z-index: 0;
					position: relative;
				}

				// WhatsApp Logo Avatar
				> span{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					color: currentColor;
					fill: currentColor;
				}
			}
			.cs-uwac__button-account_avatar-wazap{

				span{
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					color: currentColor;
					fill: currentColor;
				}
			}
		}
	}
}


@import "animate";
@import "../icons/castor-line-icons/castor-line-icons";