.widget {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	min-width: 0;
	min-height: 100px;
	word-wrap: break-word;
	box-shadow: 0px 3px 12px rgba(var(--color-border-rgb), 0.35);
	border: 1px solid rgba(var(--color-border-rgb), 0.35);
	margin-bottom: 1rem;
	color: var(--color-text);

	background-color: #fff;
	background-clip: border-box;
	border-radius: .75rem;
	touch-action: none;

	.is-dark-mode & {
		color: var(--color-text-light);
		background-color: var(--color-black);
		border: 1px solid var(--color-dark-tint);
		box-shadow: 0px 3px 12px rgba(var(--color-black-rgb), 0.35);
	}

	.resizing {
		opacity: 0.9;
	}

	.no-drag {
		height: 100%;
		width: 100%;
	}

	.vue-resizable-handle {
		position: absolute;
		background: none;
		bottom: 0;
		right: 0;
		width: 20px;
		height: 20px;
		box-sizing: border-box;
		cursor: se-resize;
		padding: 7px;
		margin: 1px;

		&:before {
			content: "";
			display: block;
			width: 6px;
			height: 6px;
			border: none;
			border-bottom: 2px solid rgba(var(--color-border-rgb), 0.6);
			border-right: 2px solid rgba(var(--color-border-rgb), 0.6);
		}
	}

	.change-color {
		display: block;
		position: absolute;
		top: 0.25rem;
		right: 0.25rem;
		z-index: 999;

		&.open {
			.colors-picker {
				visibility: visible;
				transform: translateY(0rem);
				opacity: 1;
			}

			.change-color-action {
				opacity: 0;
				z-index: -1;
				transform: translateX(-1rem);
			}
		}

		.change-color-action {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1em;
			font-size: 1rem;
			width: 1.2rem;
			height: 1.2rem;
			box-sizing: content-box;
			color: var(--color-border);
			transition: 0.4s;

			i {
				.is-dark-mode & {
					color: var(--color-border);
				}
			}
		}

		a {
			text-decoration: none !important;
		}

		.colors-picker {
			position: absolute;
			top: 0;
			right: 0;

			width: calc(24px * 4);

			box-shadow: 0 3px 12px rgba(var(--color-border-rgb),.25);
			border: 1px solid rgba(var(--color-border-rgb),.35);
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 6px;

			box-sizing: content-box;
			display: block;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-1rem);
			transition: 0.4s;

			.is-dark-mode & {
				background-color: rgba(0, 0, 0, 0.85);
				box-shadow: 0 3px 12px rgba(0,0,0,.25);
				border: 1px solid rgba(var(--color-border-rgb),.45);
			}

			a {
				box-sizing: border-box;
				display: block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				margin: 6px;
				border: 2px solid rgba(var(--color-border-rgb),.65);
				transition: 0.4s;
				float: left;

				.is-dark-mode & {
					background-color: var(--color-black);
					border: 2px solid rgba(var(--color-light-rgb), 0.15);
				}

				&.active {
					transform: scale(1.4);
					box-shadow: 0 3px 12px rgba(var(--color-border-rgb),.25);
				}

				@each $color, $value in $colors-theme {
					&.color-pick-#{$color} {
						border: 2px solid rgba(#{"var(--color-" + $color + "-rgb)"}, 0.45);
						background-color: #{"var(--color-" + $color + "-lucid)"};

						.is-dark-mode & {
							border: 2px solid rgba(#{"var(--color-" + $color + "-rgb)"}, 0.45) !important;
							background-color: #{"var(--color-" + $color + "-shaded)"} !important;
						}

						i {
							.is-dark-mode & {
								color: rgba(#{"var(--color-" + $color + "-rgb)"}, 0.45) !important;
							}
						}
					}
				}
			}
		}
	}

	.vue-draggable-handle {
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0;
		left: 0;
		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
		background-position: bottom right;
		padding: 0 8px 8px 0;
		background-repeat: no-repeat;
		background-origin: content-box;
		box-sizing: border-box;
		cursor: pointer;
	}

	@each $color, $value in $colors-theme {
		&.widget-colorfull.widget-#{$color} {
			border-color: rgba(#{"var(--color-" + $color + "-rgb)"}, 0.45);
			color: #{"var(--color-" + $color + "-lucid)"} !important;
			background: #{"var(--color-" + $color + "-tint)"};
			background: linear-gradient(135deg, #{"var(--color-" + $color + "-tint)"} 0%, #{"var(--color-" + $color + "-tinted)"} 100%);
			box-shadow: 0 28px 25px -30px #{"var(--color-" + $color + "-tint)"}, 0 0 12px rgb(0 0 0 / 10%);

			>.vue-resizable-handle:before {
				border-color: #{"var(--color-" + $color + "-lucid)"};
			}

			.is-dark-mode & {
				box-shadow: 0 28px 25px -30px #{"rgba(var(--color-" + $color + "-rgb), 0.2)"}, 0 0 12px rgb(0 0 0 / 10%);
			}

			.change-color-action i {
				color: #{"var(--color-" + $color + "-lucid)"};

				.is-dark-mode & {
					color: #{"var(--color-" + $color + "-lucid)"} !important;
				}
			}
		}
	}

	&.widget-colorfull {
		@each $color, $value in $colors-theme {
			&.widget-#{$color} {
				border-color: rgba(#{"var(--color-" + $color + "-rgb)"}, 0.45);
				color: var(--color-text-light) !important;
				background: #{"var(--color-" + $color + "-tint)"};
				background: linear-gradient(135deg, #{"var(--color-" + $color + "-tint)"} 0%, #{"var(--color-" + $color + "-tinted)"} 100%);
				box-shadow: 0 28px 25px -30px #{"var(--color-" + $color + "-tint)"}, 0 0 12px rgb(0 0 0 / 10%);

				>.vue-resizable-handle:before {
					border-color: #{"var(--color-" + $color + "-lucid)"};
				}

				.is-dark-mode & {
					box-shadow: 0 28px 25px -30px #{"rgba(var(--color-" + $color + "-rgb), 0.2)"}, 0 0 12px rgb(0 0 0 / 10%);
				}

				.change-color-action i {
					color: #{"var(--color-" + $color + "-lucid)"};

					.is-dark-mode & {
						color: #{"var(--color-" + $color + "-lucid)"} !important;
					}
				}
			}
		}

		&.widget-default {
			border-color: rgba(var(--color-default-rgb), 0.45);
			color: var(--color-default-lucid) !important;
			background: var(--color-default-tint);
			background: linear-gradient(135deg, var(--color-default-tint) 0%, var(--color-default-tinted) 100%);
			box-shadow: 0 28px 25px -30px var(--color-default-tint), 0 0 12px rgb(0 0 0 / 10%);

			>.vue-resizable-handle:before {
				border-color: var(--color-default-lucid);
			}

			.is-dark-mode & {
				box-shadow: 0 28px 25px -30px rgba(var(--color-default-rgb), 0.2), 0 0 12px rgb(0 0 0 / 10%);
			}

			.change-color-action i {
				color: var(--color-default-lucid);

				.is-dark-mode & {
					color: var(--color-default-lucid) !important;
				}
			}
		}

		.widget-badge > i {
			color: var(--color-text-light) !important;
		}
	}
}

.vue-grid-item.vue-grid-placeholder{
	border-radius: .7rem;
}

.vue-grid-item>.vue-resizable-handle {
	background: none !important;
	bottom: 0.5rem !important;
	right: 0.5rem !important;
	width: 6px !important;
	height: 6px !important;
}
