@import "/ui/styles/_theme.scss";

.anchor-pad {
	width: 130px;
	height: 90px;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	padding: 6px;
	position: relative;

	.anchor-cell {
		pointer-events: all;
		background-color: rgba(255,255,255,0.04);
		border: 1px solid $line-strong;
		cursor: pointer;
		position: absolute;
		width: 34px;
		height: 22px;
		transition: background-color 0.1s ease, border-color 0.1s ease;

		&:hover { background-color: rgba(255,255,255,0.1); border-color: $accent; }

		&.active {
			background-color: $accent;
			border-color: $accent;
		}

		&.anchor-topleft     { left: 6px;  top: 6px; }
		&.anchor-topright    { right: 6px; top: 6px; }
		&.anchor-bottomleft  { left: 6px;  bottom: 6px; }
		&.anchor-bottomright { right: 6px; bottom: 6px; }
		&.anchor-center      { left: 50%; top: 50%; transform: translate(-50%, -50%); }
	}
}