// Component settings: Accordion
// ------------------------------------------

$o-accordion: (
	'border-width':			1px,
	'border-color':			palette(border, 100),
	'header-color':			palette(neutral, 1000),
	'hover-color': 			palette(primary),
	'icon-color':			palette(neutral, 1000),
	'icon-border-size': 	2px,
	'icon-size':			20px,
	'icon-stripe-height':	2px,
	'icon-stripe-width':  	10px,
	'transition-duration':	400ms,
	'transition-easing':	cubic-bezier(0.86, 0, 0.07, 1),
);

// ------------------------------------------


.o-accordion {
	@include contain;
}

.o-accordion__item {
	@include owl(space(2));
	@include border-radius(m);
	position: relative;
	overflow: hidden;
	border-style: solid;
	border-width: map-get($o-accordion, 'border-width');
	border-color: map-get($o-accordion, 'border-color');
	transition-property: border;
	transition-duration: 250ms;

	&:not(.is-active):hover {
		border-color: palette(primary);
	}
}

.o-accordion__title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-top: space(2);
	padding-right: space(3);
	padding-bottom: space(2);
	padding-left: space(6);
	color: map-get($o-accordion, 'header-color');
	cursor: pointer;

	@include mq(m){
		padding-left: column(1,8);
	}
	@include mq(l){
		padding-left: column(1,12);
	}

	// Only set hover color when not active
	.o-accordion__item:not(.is-active) &:hover {
		color: map-get($o-accordion, 'hover-color');
	}
}

.o-accordion__icon {
	flex: 0 0 auto;
	position: absolute;
	top: auto;
	left: (space(3) - halve(map-get($o-accordion, 'icon-size')));
	width: map-get($o-accordion, 'icon-size');
	height: map-get($o-accordion, 'icon-size');
	color: inherit;
	border-color: currentColor;
	border-width: map-get($o-accordion, 'icon-border-size');
	border-style: solid;
	border-radius: 100%;
	transition-property: color;
	transition-duration: 250ms;
	transition-timing-function: ease;

	@include mq(m){
		left: calc(#{column(0.5, 8)} - #{halve(map-get($o-accordion, 'icon-size'))});
	}
	@include mq(l){
		left: calc(#{column(0.5, 12)} - #{halve(map-get($o-accordion, 'icon-size'))});
	}

	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		height: map-get($o-accordion, 'icon-stripe-height');
		width: map-get($o-accordion, 'icon-stripe-width');
		left: halve(map-get($o-accordion, 'icon-size') - map-get($o-accordion, 'icon-stripe-width') - (double(map-get($o-accordion, 'icon-border-size'))));
		top: calc(50% - #{halve(map-get($o-accordion, 'icon-border-size'))});
		background-color: currentColor;
		transition-property: background-color, transform;
		transition-duration: 250ms, map-get($o-accordion, 'transition-duration');
		transition-timing-function: ease, map-get($o-accordion, 'transition-easing');
	}

	&::before {
		.o-accordion__item.is-active & {
			transform: scaleX(0) rotate(0.25turn);
		}
	}

	&::after {
		transform: rotate(0.25turn);

		.o-accordion__item.is-active & {
			transform: rotate(0.5turn);
		}
	}
}

.o-accordion__header {
	@include font-size(base);
	font-weight: 500;
	color: inherit;
	text-decoration: inherit;
	transition-property: color;
	transition-duration: 250ms;
	transition-timing-function: ease;

	@include mq(m) {
		@include font-size(l);
	}
}

/* Hidden by default*/
.o-accordion__content {
	@include owl-children;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	padding-left: space(6);
	padding-right: space(3);
	transform: translateY(6px);
	// Close animation
	transition: all 0.2s ease-in-out;

	@include mq(m){
		padding-left: column(1,8);
	}
	@include mq(l){
		padding-left: column(1,12);
	}

	.o-accordion__item.is-active & {
		opacity: 1;
		max-height: 400px;
		padding-bottom: space(4);
		transform: none;
		// Open animation (with the same delay as close duration)
		transition-property: all;
		transition-duration: map-get($o-accordion, 'transition-duration');
		transition-timing-function: ease-out;
		transition-delay: 0.2s;
	}
}