.bubbly-container {
	--bubbly-left: 10px;
	--bubbly-right: auto;
	--bubbly-top: auto;
	--bubbly-bottom: 10px;
	--bubbly-button-close-color: #fff;

	top: var(--bubbly-top);
	bottom: var(--bubbly-bottom);
	left: var(--bubbly-left);
	right: var(--bubbly-right);

	display: flex;
	flex-direction: column-reverse;
	width: auto;
	position: fixed;
	gap: 4px;
	font-size: 14px;
	z-index: 99999;
}

/* Positions */
.bubbly-container.position-left-top {
	--bubbly-left: 10px;
	--bubbly-right: auto;
	--bubbly-top: 10px;
	--bubbly-bottom: auto;
}

.bubbly-container.position-left-bottom {
	--bubbly-left: 10px;
	--bubbly-right: auto;
	--bubbly-top: auto;
	--bubbly-bottom: 10px;
}

.bubbly-container.position-right-top {
	--bubbly-left: auto;
	--bubbly-right: 10px;
	--bubbly-top: 10px;
	--bubbly-bottom: auto;
}

.bubbly-container.position-right-bottom {
	--bubbly-left: auto;
	--bubbly-right: 10px;
	--bubbly-top: auto;
	--bubbly-bottom: 10px;
}

.bubbly-container.position-center-top {
	--bubbly-left: 50%;
	transform: translateX(-50%);
	--bubbly-right: auto;
	--bubbly-top: 10px;
	--bubbly-bottom: auto;
}

.bubbly-container.position-center-bottom {
	--bubbly-left: 50%;
	transform: translateX(-50%);
	--bubbly-right: auto;
	--bubbly-top: auto;
	--bubbly-bottom: 10px;
}

/* Notificaitons */
.bubbly-item {
	--bubbly-item-color: #464646;
	--bubbly-item-background: #d3d3d3;
	--bubbly-item-border-radius: 8px;

	color: var(--bubbly-item-color);
	background-color: var(--bubbly-item-background);
	border-radius: var(--bubbly-item-border-radius);
	padding: 10px 30px 10px 10px;
	white-space: normal;
	word-break: break-word;
	position: relative;
	overflow: hidden;
}

/* Types */
.bubbly-item.bubbly-error {
	--bubbly-item-color: #ff4141;
	--bubbly-item-background: #ffcaca;
	--bubbly-button-close-color: #ff4141;
}

.bubbly-item.bubbly-info,
.bubbly-item.bubbly-confirm {
	--bubbly-item-color: #fff;
	--bubbly-item-background: #7838ff;
	--bubbly-button-close-color: #fff;
}

.bubbly-item.bubbly-warning {
	--bubbly-item-color: #fff;
	--bubbly-item-background: #f7a934;
	--bubbly-button-close-color: #fff;
}

.bubbly-item.bubbly-success {
	--bubbly-item-color: #fff;
	--bubbly-item-background: #1ed324;
	--bubbly-button-close-color: #fff;
}

/* Close button */
.bubbly-item > button.btn-close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
}

.bubbly-item > button.btn-close > svg {
	fill: var(--bubbly-button-close-color);
	width: 10px;
	height: 10px;
}

@media (max-width: 768px) {
	.bubbly-container {
		width: -webkit-fill-available;
		right: var(--bubbly-left);
	}
}