:host {
	/* Label Container */
	/*@doc Define o espaçamento da esquerda do container*/
	--ez-sidebar-navigator--padding-left: var(--space--xs, 12px);
	/*@doc Define o espaçamento da direita do container*/
	--ez-sidebar-navigator--padding-right: var(--space--xs, 12px);
	/*@doc Define o espaçamento entre o cabeçalho conteúdo e rodapé*/
	--ez-sidebar-navigator--gap: var(--space--xs, 12px);
	/*@doc Define a cor de shadow box do container de label*/
	--ez-sidebar-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
	/*@doc Define a cor de fundo do container de label*/
	--ez-sidebar-navigator--background-color: var(--color--inverted);
	/*@doc Define o border radius do container de label*/
	--ez-sidebar-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
	/*@doc Força uma altura especifica para o sidebar, o padrão é 100% da tela*/
	--ez-sidebar-navigator--height: calc(100vh - var(--space--lg, 24px));
	/*@doc Define a camada em que o componente será exibido.*/
	--ez-sidebar-navigator--z-index: var(--elevation--20, 20);
	
	/*Labels Header */
	/*@doc Define o espaçamento entre os componente do cabeçalho*/
	--ez-sidebar-navigator--header-gap: var(--space--xs, 12px);

	/*Labels Footer */
	/*@doc Define o espaçamento entre os componente do rodadé*/
	--ez-sidebar-navigator--footer-gap: var(--space--xs, 12px);


	 /* Title */
	/*@doc Define a fonte do título do componente */
	--ez-ez-sidebar-navigator__title--font-family: var(--font-pattern, "Roboto");
	/*@doc Define o tamanho da fonte do título do componente.*/
	--ez-ez-sidebar-navigator__title--font-size: var(--title--medium, 16px);
	/*@doc Define a cor da fonte do título do componente.*/
	--ez-ez-sidebar-navigator__title--color: var(--title--primary, #2b3a54);
	/*@doc Define o peso da fonte do título do componente.*/
	--ez-ez-sidebar-navigator__title--font-weight: var(--text-weight--extra-large, 700);

}

.inverted {
	/* private */
	transform: rotate(180deg);
}

.ez-sidebar-navigator {
	/* private */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: var(--ez-sidebar-navigator--height);
	padding-top: var(--space--xs, 12px);
	padding-bottom: var(--space--xs, 12px);
	outline: none;

	/* public */
	gap: var(--ez-sidebar-navigator--gap);
	padding-left: var(--ez-sidebar-navigator--padding-left);
	padding-right: var(--ez-sidebar-navigator--padding-right);
	background-color: var(--ez-sidebar-navigator--background-color);
	-webkit-box-shadow: var(--ez-sidebar-navigator--box-shadow);
	box-shadow: var(--ez-sidebar-navigator--box-shadow);
	border-radius: var(--ez-sidebar-navigator--border-radius);
}

.ez-sidebar-navigator__header {
	/* private */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: space-between;
	
	/* public */
	gap: var(--ez-sidebar-navigator--header-gap);
}

.ez-sidebar-navigator__content {
	height: 100%;
}

.ez-sidebar-navigator__footer {
	/* private */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	/* public */
	gap: var(--ez-sidebar-navigator--footer-gap);
}

.ez-sidebar-navigator__title {
	/* private */
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

	/* public */
	font-family: var(--ez-ez-sidebar-navigator__title--font-family);
	font-size: var(--ez-ez-sidebar-navigator__title--font-size);
	font-weight: var(--ez-ez-sidebar-navigator__title--font-weight);
	color: var(--ez-ez-sidebar-navigator__title--color);

}

.ez-sidebar-navigator__end {
	/* private */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-left: auto;
	/* public */
	gap: var(--ez-sidebar-navigator--gap);
}

.dynamic {
	position: absolute;
	z-index: var(--ez-sidebar-navigator--z-index);
}

.fixed {
	position: relative;
}

.hidden {
	display: none;
}

.show {
	animation: fadeIn .1s ease-in-out 1;
}

@keyframes fadeIn {
	from {
		transform: translate(-100%);
	  }
}

.sm {
	/* private */
	width: 240px;
}

.md {
	/* private */
	width: 280px;
}

.lg {
	/* private */
	width: 320px;
}

@media screen and (max-width: 991px) {
	.responsive {
		/* private */
		width: 240px;
	}
}
@media screen and (min-width: 992px) {
	.responsive {
		/* private */
		width: 280px;
	}
}
@media screen and (min-width: 1200px) {
	.responsive {
		/* private */
		width: 320px;
	}
}