.lightbox-content {
--lightbox-arrow-alpha: .35;
--lightbox-bar-font: 1.3125rem;
--lightbox-bar-height: calc(var(--lightbox-bar-font) * 1.5 + .75rem);
background-color: rgba(0, 0, 0, .95);
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
width: var(--lightbox-bar-height);
height: var(--lightbox-bar-height);
padding: 0;
border-radius: var(--bs-border-radius);
background-color: rgba(0, 0, 0, .6);
opacity: 1;
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
filter: none;
}
.lightbox-close:hover {
background-color: rgba(0, 0, 0, 1);
opacity: 1;
}
.lightbox-counter {
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
background-color: rgba(0, 0, 0, .6);
color: #fff;
padding: .375rem 1.125rem;
border-radius: var(--bs-border-radius);
font-size: var(--lightbox-bar-font);
}
.lightbox-content .carousel-control-prev-icon,
.lightbox-content .carousel-control-next-icon {
width: 3.16rem;
height: 3.16rem;
background-color: rgba(0, 0, 0, var(--lightbox-arrow-alpha));
background-size: 1.44rem;
border-radius: var(--bs-border-radius);
transition: background-color .15s ease;
}
.lightbox-content .carousel-control-prev,
.lightbox-content .carousel-control-next {
opacity: 1;
}
.lightbox-content .carousel-control-prev:hover .carousel-control-prev-icon,
.lightbox-content .carousel-control-next:hover .carousel-control-next-icon {
background-color: rgba(0, 0, 0, 1);
}