/* Accordion */

.mondo-accordion {
	.accordion-item {
		margin-bottom: 10px;

		&.open .entry-content {
			display: block;
		}
	}
	.entry-title {
		// background-color: @shortcode-accordion-title-bg-color;
		border: 1px solid @shortcode-accordion-title-border-color;
		cursor: pointer;
		font-size: @shortcode-accordion-title-font-size;
		margin: 0;
		padding: 15px;

		&:hover {
			background-color: @shortcode-accordion-title-hover-bg-color;
			border-color: @shortcode-accordion-title-hover-border-color;
			color: @shortcode-accordion-title-hover-text-color;
		}
	}
	.entry-content {
		border: 1px solid @shortcode-accordion-content-border-color;
		border-top: 0;
		display: none;
		padding: 15px;
	}
}

/* Divider */

.mondo-divider {
	background-color: @shortcode-divider-bg-color-light;
	display: inline-block;
	margin: 20px 0 27px 0;
	position: relative;

	&.mini {
		background-color: @shortcode-divider-bg-color-dark;
		left: 50%;
		margin-left: -10px;
		width: 20px;
		height: 2px;
	}
	&.full {
		width: 100%;
		height: 2px;
	}
	&.dashed,
	&.dotted {
		background-color: transparent;
		border-bottom: 2px dashed @shortcode-divider-bg-color-light;
		width: 100%;
		height: 0;
	}
	&.dotted {
		border-bottom-style: dotted;
	}
}

/* Icon */

.mondo-icon {
	&.medium { font-size: @shortcode-icon-medium-font-size; }
	&.large { font-size: @shortcode-icon-large-font-size; }
}

/* Image */

.mondo-image {
	max-width: 100%;
}

/* Parallax */

.mondo-parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
	margin: 30px 0;
}

/* Tweet */

.mondo-tweetable {
	background-color: @shortcode-tweet-bg-color;
	cursor: pointer;
	padding: 0 4px;
	.transition(background-color @main-animation);

	&:after {
		color: @shortcode-tweet-icon-color;
		content: "\f535";
		font-family: MaterialDesignIcons;
		margin-left: 2px;
		.transition(color @main-animation);
	}

	&:hover {
		background-color: @shortcode-tweet-hover-bg-color;

		&:after {
			color: @shortcode-tweet-icon-hover-color;
		}
	}
}