@import 'variables';

[data-open-close-icon]{
	&:after {
		content: " ";
		display: block;
		position: absolute;
		top: 1px;
		right: 8px;
		height: 25px;
		width: 25px;
		opacity: 0.25;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-position: center center;
		/* background-image required in order for background-size to work*/
        background-image: url(../../../node_modules/open-iconic/svg/caret-bottom.svg);
	}
	&:hover:after {
		opacity: 1;
	}
}
[data-open-close-icon="closed"]:after {
	transform: rotate(180deg);
	transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}