:root {
    --f-carousel-dots-top: 100%;
    --f-carousel-dots-bottom: auto;
    --f-carousel-dots-width: 24px;
    --f-carousel-dots-height: 30px;
    --f-carousel-dot-width: 8px;
    --f-carousel-dot-height: 8px;
    --f-carousel-dot-border-radius: 100%;
    --f-carousel-dot-bg: #ffffff;
    --f-carousel-dot-hover-bg: #ffffff;
    --f-carousel-dot-selected-bg: var(--bs-primary, #d32f2f);
    --f-carousel-dot-opacity: .4;
    --f-carousel-dot-hover-opacity: .8;
    --f-carousel-dot-selected-opacity: 1;
    --f-carousel-dot-transition: all .15s ease
}


.f-carousel.has-dots {
    margin-bottom: var(--f-carousel-dots-height)
}

.f-carousel__dots {
    position: absolute;
    top: var(--f-carousel-dots-top);
    bottom: var(--f-carousel-dots-bottom);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--f-carousel-dots-gap, 0)
}

.in-fullscreen-mode>.f-carousel__dots,
.in-expanded-mode>.f-carousel__dots {
    top: auto;
    bottom: 0
}

.f-carousel__dot {
    display: block;
    position: relative;
    width: var(--f-carousel-dots-width);
    height: var(--f-carousel-dots-height);
    opacity: var(--f-carousel-dot-opacity);
    border: 0;
    color: currentColor;
    background-color: transparent;
    transition: var(--f-carousel-dot-transition)
}

.f-carousel__dot:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--f-carousel-dot-width);
    height: var(--f-carousel-dot-height);
    background-color: var(--f-carousel-dot-bg);
    border-radius: var(--f-carousel-dot-border-radius);
    transition: inherit
}

.f-carousel__dot:hover {
    cursor: pointer;
    opacity: var(--f-carousel-dot-hover-opacity)
}

.f-carousel__dot:hover:after {
    background-color: var(--f-carousel-dot-hover-bg)
}

.f-carousel__dot[aria-current] {
    opacity: var(--f-carousel-dot-selected-opacity, 1)
}

.f-carousel__dot[aria-current]:after {
    background-color: var(--f-carousel-dot-selected-bg)
}