//------------------------------------------------------------------------------------------------
// EXPANDER
//------------------------------------------------------------------------------------------------

/*
Decorated wrapper around expander object. Use if you require a premade
expander, rather than creating your own using the expander object as a base.
*/
	

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the button component without having to
find/replace variables.
*/

$component-expander-header-background-color: 'very-light' !default;
$component-expander-accent-color: 'primary' !default;
$component-expander-border-color: 'light' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-expander__header {
	cursor: pointer;
	border: rem(0px) solid color($component-expander-border-color);
	transition: border-radius $global-transition-duration-fast, background-color $global-transition-duration;
	position: relative;
	overflow: hidden;
	background-color: color($component-expander-header-background-color);
	border-width: rem(1px);
}

.c-expander__header-icon {
	width: rem(20px);
	height: rem(20px);
	position: relative;
	&:before,
	&:after {
		content: '';
		display: block;
		width: rem(2px);
		height: rem(20px);
		background-color: currentColor;
		margin: 0 auto;
		transition: transform $global-transition-duration;
	}
	&:after {
		width: rem(20px);
		height: rem(2px);
		position: absolute;
		bottom: rem(9px);
	}
}

.c-expander.is-active {
	.c-expander__header {
		background-color: color($component-expander-header-background-color);
	}

	.c-expander__header-icon:before {
		transform: rotate(90deg);
	}
}

.c-expander__content {
	border: rem(0px) solid color($component-expander-border-color);
	border-top: 0;
	border-bottom-left-radius: $global-border-radius;
	border-bottom-right-radius: $global-border-radius;
}


// BORDER MODIFIER
//------------------------------------------------------------------------------------------------

.c-expander--content-border {
	.c-expander__content {
		border-width: rem(1px);
	}
	&.is-active,
	&.is-animating {
		.c-expander__header {
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}