/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

-------------------------------------------------------------------------------
 INFORMATION
-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

-------------------------------------------------------------------------------

*/

div.article--icon {
	width: 24px; height: 24px; text-align: center; line-height: 24px; font-size: 16px; border-radius: 12px;
    color: hsl(var(--hue),var(--saturation),50%); cursor: pointer;
    transition: transform 300ms ease-in-out;
}

div.article--icon:hover{
    background-color: hsl(var(--hue),var(--saturation),95%); 
    color: hsl(var(--hue),var(--saturation),30%);
}

.--close div.article--icon {
	transform: rotate(-90deg);
}

.--close .article--container {
	display: none;
}