.bob-container {
	&:not(.is-previewing) {
		padding-top: 1.25rem;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			height: 1.25rem;
			background-color: #c5ccd3;

			@media (prefers-color-scheme: dark) {
				background-color: #16191d;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23383838' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
			}
		}
	}

	.simplebar-content__bob-container {
		position: absolute;
		pointer-events: none;
		z-index: 1000;

		&__bob {
			position: absolute;
			top: 0;
			left: 0;
			transition-property: all;
			width: 100%;
			height: 100%;
			border: 2.5px dashed rgb(108 167 238 / 0.5);
			pointer-events: none;
		}

		&__curr-bob {
			position: absolute;
			top: 0;
			left: 0;
			transition-property: all;
			width: 100%;
			height: 100%;
			pointer-events: none;
			border: 2.5px solid #6ca7ee;
		}

		&__buttons {
			position: absolute;
			width: 0;
			z-index: 1000;

			&__container {
				display: flex;
				position: absolute;
				bottom: 100%;
				left: 100%;
				justify-content: space-between;
				gap: 0.25rem;
				z-index: 999;

				&:hover {
					z-index: 1000;
				}

				&__button {
					position: relative;
					padding: 0.125rem;
					padding-left: 0.75rem;
					padding-right: 0.75rem;
					color: #ffffff;
					font-size: 0.875rem;
					line-height: 1.25rem;
					text-align: center;
					border-top-left-radius: 0.25rem;
					border-top-right-radius: 0.25rem;
					cursor: pointer;
					z-index: 999;
					background-color: #6ca7ee;

					&:hover {
						z-index: 1000;
					}

					&:hover > div {
						opacity: 0.2;
					}

					&__inside {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background-color: #000000;
						transition-property: opacity;
						border-top-left-radius: 0.25rem;
						border-bottom-left-radius: 0.25rem;
						opacity: 0;
					}
				}
			}
		}
	}
}