﻿.ºcontainer{
	--padding-top: calc(var(--size-4) - var(--size-1) / 2);
	--padding: var(--padding-top) var(--size-4);	
	padding: var(--padding);
	background: var(--color-12);
	border-radius: var(--control-border-radius-2);
	overflow: hidden;
}
	.ºcontainer.error{
		padding: var(--size-4);
		background: var(--control-error-color);
	}
		.ºcontainer.error *{
			color: var(--color-12);
		}


.ºcontainer_collapsable{
	background: var(--color-12);
	border-radius: var(--control-border-radius-2);
	overflow: hidden;
}

	.ºcontainer_collapsable .header{
		display: grid;
		grid-template-columns: 1fr min-content;
		height: var(--size-4);
		padding: var(--size-1);
		cursor: pointer;
        transition: 
			background-color .3s ease-in;
	}
		.ºcontainer_collapsable .header:hover{
			background-color: var(--color-8);
		}
		.ºcontainer_collapsable .header .label{
		    display: flex;
    		align-items: center;			
			padding-left: var(--size-2);
			font-weight: 500;
		}
		.ºcontainer_collapsable .header .arrow{
			display: flex;
			align-items: center;
			width: var(--control-height);
			line-height: var(--control-height-2);
			justify-content: center;			
			transition: transform .3s ease-in;
		}
			.ºcontainer_collapsable.expanded .header .arrow{
				transform: rotate(-180deg);
			}

	.ºcontainer_collapsable .panel{
		max-height: 0;
		overflow: hidden;
		transition: 
			max-height 0.3s ease-out;
	}
		.ºcontainer_collapsable .content{
			padding: var(--size-2);
		}

