.binds-modal
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	pointer-events: all;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: #454545;

	.inner-modal
	{
		background-color: #232321;
		padding: 64px;
		max-width: 30%;
		max-height: 80%;
		border-radius: 10px;

		.grow
		{
			flex-grow: 1;
		}

		.footer
		{
			bottom: 0;
			position: absolute;
			height: 48px;
			right: 0;
			padding: 0px 16px;

			.button
			{
				height: 32px;
				text-align: center;
				background-color: rgba( black, 0.5 );
				cursor: pointer;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				font-family: Roboto;
				padding: 16px;
				border-radius: 4px;

				&:hover
				{
					background-color: rgba( #4548f3, 0.5 );
				}
			}
		}

		.action-list
		{
			flex-direction: column;
			overflow: scroll;
			margin-bottom: 24px;

			.group
			{
				flex-direction: row;
				flex-wrap: wrap;
				flex-shrink: 0;
				max-height: 100%;
				padding-bottom: 48px;
				gap: 4px 30px;
			}

			> .subtitle
			{
				margin-bottom: 8px;
				margin-top: 8px;
				height: 16px;
				flex-shrink: 0;
				font-family: Roboto;
				font-weight: semibold;
				font-size: 20px;
			}

			.row
			{
				width: 45%;
				flex-direction: row;
				flex-shrink: 0;
				padding: 4px;
				align-items: center;

				> .name
				{
					font-family: Roboto;
					font-size: 14px;
					width: 50%;
				}

				> .bind
				{
					width: 50%;
					font-family: Roboto;
					padding: 8px 16px;
					text-align: center;
					background-color: rgba( black, 0.5 );
					cursor: pointer;
					justify-content: center;
					align-items: center;
					border-radius: 4px;

					&:hover
					{
						background-color: rgba( #4548f3, 0.5 );
					}
				}
			}
		}
	}
}