// # Variables
// -----------------------------------------------------------------------------

$color-border:    #ddd;
$color-open-icon: #777;



// # Accordion Default Styles
// -----------------------------------------------------------------------------

// Force all content open if there is no JS.
.no-js {
	.c-accordion__content {
		display: block !important;
	}

	.c-accordion__title {
		padding-right: none;
		cursor: default;

		&:after {
			display: none;
		}
	}
}

.c-accordion__title--button {
	display: inline-block;
	color: inherit;
	background-color: transparent;
	text-align: left;
	vertical-align: middle;
	font: inherit;
	text-decoration: none;
	direction: ltr;
	border: none;
	border-radius: 0;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	transition: 0;
	box-shadow: none;
	overflow: auto;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;

	&:focus,
	&:hover {
		color: inherit;
		background-color: transparent;
	}
}

.c-accordion__title {
	position: relative;
	padding-right: 2rem;
	cursor: pointer;

	&:after {
		position: absolute;
		top: 50%;
		right: 0;
		content: "+";
		color: $color-open-icon;
		font-weight: 300;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
}

.is-open {
	.c-accordion__title {
		&:after {
			content: "\2212";
		}
	}
}

// Make all the content visible when printing the page.
@media print {
	.c-accordion__content {
		display: block !important;
	}
}