@reference "tailwindcss";

.menu-settings {
	.cdk-drag-preview {
		box-sizing: border-box;
		border-radius: 4px;
		box-shadow:
			0 5px 5px -3px rgba(0, 0, 0, 0.2),
			0 8px 10px 1px rgba(0, 0, 0, 0.14),
			0 3px 14px 2px rgba(0, 0, 0, 0.12);
	}

	.cdk-drag-animating {
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	.cdk-drag-placeholder {
		background: rgb(223, 223, 223);
		border: dotted 3px #999;
		min-height: 70px;
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

		@apply rounded-xl;
	}

	router-outlet {
		+ * {
			@apply absolute inset-0 w-full h-full pb-2 px-2 basis-0 flex-grow-0;

			@media (min-width: 1280px) {
				@apply relative;
			}
		}
	}
}