/* Combo Icone */
nav .menu-combo,
.submenu-combo,
.lista-combo,
.select-combo {
	i.icone {
		width: 20px;
		height: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		cursor: pointer;

		/* Icone hamburger */
		&[data-icon='hamburger'] {
			&::before,
			&::after {
				content: '';
				display: block;
				width: 20px;
				height: 1px;
				transition: 0.1s;
			}

			&::before {
				margin-top: 6px;
			}

			&::after {
				margin-top: 6px;
			}
		}

		/* Icone arrow (pequeno) */
		&[data-icon='arrow-p'] {
			&::before,
			&::after {
				content: '';
				display: block;
				width: 7px;
				height: 1px;
				margin-top: 10px;
				transition: 0.1s;
			}

			&::before {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				margin-left: 0;
			}

			&::after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				margin: -1px 0 0 9px;
			}
		}

		/* Icone arrow (grande) */
		&[data-icon='arrow-g'] {
			&::before,
			&::after {
				content: '';
				display: block;
				width: 13px;
				height: 1px;
				margin-top: 10px;
				transition: 0.1s;
			}

			&::before {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				margin-left: -8px;
			}

			&::after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				margin: -1px 0 0 9px;
			}
		}
	}

	/* Combo ativado */
	.gatilho.close i.icone {
		/* Icone hamburger (fechar) */
		&[data-icon='hamburger'] {
			&::before {
				margin-top: 10px;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			&::after {
				margin-top: -1px;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
		}

		/* Icone arrow (pequeno) (fechar) */
		&[data-icon='arrow-p'] {
			&::before {
				width: 10px;
				margin: 10px 0 0 6px;
				transform: rotate(45deg);
			}

			&::after {
				width: 10px;
				margin: -1px 0 0 6px;
				transform: rotate(-45deg);
			}
		}

		/* Icone arrow (grande) (fechar) */
		&[data-icon='arrow-g'] {
			&::before {
				width: 20px;
				margin: 10px 0 0 0;
				transform: rotate(45deg);
			}

			&::after {
				width: 20px;
				margin: -1px 0 0 0;
				transform: rotate(-45deg);
			}
		}
	}
}

/* Submenu */
nav {
	.submenu-combo {
		position: relative;

		.gatilho {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.submenu {
			min-width: 100%;
			display: none;
			flex-direction: column;
		}

		&.show {
			.submenu {
				display: flex;
			}
		}
	}
}

/* Categorias */
.lista-combo {
	position: relative;

	.gatilho {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		gap: 20px;
	}

	&.show {
		.lista {
			display: flex;
			width: 100%;
		}
	}
}

/* Formulario */
.select-combo {
	position: relative;

	.gatilho {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.select {
		min-width: 100%;
		display: none;
		flex-direction: column;
	}

	&.show {
		.select {
			display: flex;
		}
	}
}