.button.gray{
	background-color:$medium-gray;
}

.button.white{
	background-color:$white;
	color:$medium-gray;
}

.button-toggle{
	background:none;
	padding:0;
	color:$black;
	padding: 0.75rem 0;
	cursor: pointer;
	position: relative;
	width:1.5rem;
	height:1.5rem;
	
	&:focus{background:none;}
	&:hover{
		background:none;
		//color:$primary-color;
	}
	
	span{
		position: absolute;
		transition: 300ms;
		background: $primary-color;
		&:first-child {
			top: 25%;
			bottom: 25%;
			width: 10%;
			left: 45%;
		}
		
		&:last-child {
			left: 25%;
			right: 25%;
			height: 10%;
			top: 45%;
		}
		
	}

	&[aria-expanded="false"]{
		
		span{transform: rotate(90deg);}
		span:last-child {
			left: 50%;
			right: 50%;
		}
		
	}
  
}

.button-group,
.button-group:hover{
	background:none;
}

small.clear{
	display:block;
	line-height:1rem;
}


.data-form-toggle{
	
	.wrapper__form{
		
		@include animate(0.5s);
		
		overflow:hidden;
		max-height: 1000px;
		height:auto;
		
		.form{margin-bottom:1.5rem;}
		
		&.collapsed{
			//overflow:hidden;
			max-height: 0;
		}

	}
	
}