@import "@styles/vars.less";

.tools-bar-wrapper {
	position: sticky;

	top: 0;
	right: 0;

	z-index: 150;

	height: 100vh;
	height: 100dvh;
	max-width: 420px;

	padding: 10px;

	.visible {
		min-width: 320px;
	}

	&:not(.visible) {
		min-width: 0;
		padding: 0;
	}
}

.tools-bar {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	border-radius: 12px;

	border-radius: @sidebar_borderRadius;
	box-shadow: @card-shadow;

	padding: 10px;

	background-color: var(--background-color-accent);

	gap: 20px;

	flex: 0;

	.attached_renders {
		position: relative;

		display: flex;
		flex-direction: column;

		align-items: center;

		width: 100%;
		height: fit-content;

		gap: 10px;

		&.bottom {
			position: absolute;

			bottom: 0;
			left: 0;

			padding: 10px;
		}

		.card {
			width: 100%;
			height: fit-content;

			background-color: var(--background-color-primary);
		}
	}
}
