/*!
Developed by Web+apps Para Emprendedores
@author: Oscar Alderete <consultas.wpe@gmail.com>
@website: https://wpe.oscaralderete.com
*/

.wpe_shortcode {
	--font-family: Arial, Helvetica, sans-serif;
	--bg-color: transparent;
	--color: #111;
	--border: solid 1px #ccc;
	--transition: all .5s ease;
	--bg-marker: #D3FE3E;
	--bg-button: #FE3E73;


	background-color: var(--bg-color);
	font-family: var(--font-family);
	color: var(--color);

	span {
		font-size: 2.4em;
	}

	>ul.accordion,
	ul.grill {
		list-style-type: none !important;
		padding: 0;
		margin: 0;
	}

	>ul.accordion {
		border-top: var(--border);

		>li {
			border-bottom: var(--border);

			>header {
				display: flex;

				div {
					flex: 1;
					padding: 1em 0;
					font-size: .8em;
					cursor: pointer;
					color: rgb(26, 115, 232);
				}

				aside {
					width: 1em;
					background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' /%3E%3C/svg%3E") center center no-repeat transparent;
					background-size: 1em auto;
					transition: var(--transition);
				}
			}

			>article {
				height: 0;
				overflow-y: hidden;
				visibility: hidden;
				opacity: 0;
				transition: var(--transition);
				margin-bottom: 0;
				font-size: .75em;
			}

			&.active {
				>header>aside {
					transform: rotate(180deg);
				}

				>article {
					height: auto;
					visibility: visible;
					opacity: 1;
					margin-bottom: 1em;
				}
			}
		}
	}

	ul.grill {
		column-count: 2;
		column-gap: 1em;

		>li {
			border: var(--border);
			border-radius: .5em;
			padding: .5em;
			break-inside: avoid;
			margin-bottom: 1em;

			&.active {
				background-color: #D3FE3E;
			}

			>header {
				font-size: .8em;
				cursor: pointer;
			}

			>article {
				display: none;
				font-size: .75em;
			}
		}
	}

	.wpe_shortcode-answer {
		position: relative;
		/* 'height' works as a separator */
		height: 1em;

		>div {
			position: absolute;
			display: flex;
			flex-direction: column;
			gap: .5em;
			align-items: center;
			bottom: .5rem;
			background-color: rgba(0, 0, 0, .75);
			color: #fff;
			left: 0;
			right: 0;
			font-size: .75em;
			padding: 1em;
			border-radius: .5em;
			box-shadow: 0 0 1em #555;
			cursor: pointer;
			animation: fadeIn .4s ease-in;

			&.active {
				background-color: var(--bg-marker);
			}

			>div {
				text-align: center;
			}

			>button {
				background-color: var(--bg-button);
				border: none;
				padding: .5em 1em;
				color: #fff;
				border-radius: .5em;
				cursor: pointer;
			}
		}
	}
}

.wpe_credits {
	font-size: 60%;
	text-align: right;
	color: #999;
	margin-top: 2em;
}


@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
		/* subtle rise effect */
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}