.article-section {
	background: $color--graylight;
	border-radius: 0.3rem;
	display: inline-block;
	width: 100%;
	margin-top: 2rem;

	.article-section__field { display: none; }
	&.open {
		padding-bottom: 1rem;
		.article-section__field { display: block; }
	}
}

.article-section__controll {
}
.article-section__controll--open {
	font-weight: 600;
	display: inline-block;
	float: left;
	padding: 1rem 1.5rem;
	color: $color--main;
	cursor: pointer;
	transition: all 0.2s linear;
	border-top-left-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
	background: $color--graymiddle;
	text-align: left;
	width: calc(100% - 8.1rem);

	&:hover {
		background: darken($color--graymiddle, 5%);

	}
} 
.article-section__controll--close {
	font-weight: 400;
	display: inline-block;
	float: right;
	padding: 1rem 1.5rem;
	color: $color--main;
	cursor: pointer;
	transition: all 0.2s linear;
	border-top-right-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
	background: $color--graymiddle;
	text-align: center;
	width: 8rem;

	&:hover {
		background: darken($color--graymiddle, 5%);
	}

	&.active {
		background: lighten($color--additional,10%);
		color: $color--white;
		&:hover { background: $color--additional; box-shadow: none; text-decoration: none;}
	}
}