/**
 * Accordion
 *
 * Description: Styles for accordions.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Accordion
 *   1.1 - Accordion (responsive)
 * 2.0 - Ask politicans answer
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Accordion
 * -----------------------------------------------------------------------------
 */

.accordion {
	margin-bottom: $margin-standard;

	.accordion-item {
		border: em(2px) solid $pink;
		margin-bottom: em(12px);
	}

	.accordion-header {
		$font-size: $font-size-base-pixel;
		position: relative;
		font-family: $font-family-base;
		font-size: em($font-size);
		font-weight: 600;
		background-color: $pink-lightest;
		margin: 0;
		padding: 0;

		a {
			display: block;
			padding: em(14px, $font-size) em(50px, $font-size) em(14px, $font-size) em(20px, $font-size);
			color: $text-color;

			.icon {
				position: absolute;
				font-size: em(30px);
				font-weight: 200;
				top: em(14px, 30px);
				right: em(21px, 30px);
				vertical-align: top;
			}

			.subheader {
				font-size: em(16px);
				font-weight: 400;
				display: block;
			}
		}
	}

	.accordion-content {
		padding: em(14px) em(20px);
	}
}


/**
 * 1.1 - Accordion (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.accordion {
		.accordion-header {
			font-size: getFontsize($p-sizes, 'small');
		}
	}
}



/**
 * 2.0 - Ask politicans answer
 * -----------------------------------------------------------------------------
 */
 
.ask-politicans-answer {
	margin-bottom: em(20px);
	border-bottom: 1px solid #f1f2f2;

	&.unanswered {
		opacity: 0.6;
	}

	img {
		width: em(25px);
	}

	.h-related {
		margin-top: em(-5px);
		margin-bottom: em(-5px);
	}
}