.app-quick-group {
	.app-quick-group-container {
		width          : 90%;
		height         : 30px;
		margin         : 5px auto;
		display        : flex;
		justify-content: space-around;
		align-items    : center;
		font-size      : 13px;
		box-sizing: content-box;
		.app-quick-group__tab {
			flex           : 1;
			height         : 30px;
			display        : flex;
			justify-content: center;
			align-items    : center;
			margin         : 0 0 -1px -1px;
			position       : relative;

			.app-quick-group__tab__badge {
				--padding-bottom: 0;
				--padding-end   : 3px;
				--padding-start : 3px;
				--padding-top   : 1px;
				position        : absolute;
				top             : -5px;
				right           : 0;
				z-index         : 10000;
				min-width       : 15px;
				height          : 15px;
				text-align      : center;
				line-height     : 15px;
			}
		}

	}

	.app-quick-group__list {
		position                  : absolute;
		left                      : 0;
		right                     : 0;
		width                     : 90%;
		max-height                : 0;
		transition                : max-height 0.3s ease-in;
		margin                    : auto;
		display                   : flex;
		flex-direction            : column;
		justify-content           : flex-start;
		align-items               : flex-start;
		z-index                   : 9999;
		overflow                  : hidden;
		overflow-y                : auto;
		border-bottom-left-radius : 10px;
		border-bottom-right-radius: 10px;

		.app-quick-group__list__item {
			width      : 100%;
			padding    : 10px 20px;
			display    : flex;
			font-size  : 13px;
			align-items: center;

			.app-quick-group__tab__badge {
				--padding-bottom: 0;
				--padding-end   : 5px;
				--padding-start : 5px;
				--padding-top   : 0;
				margin-left     : 10px;
			}
		}
	}

	.app-quick-group__list--open {
		max-height: 400px;
	}
}