.slider-anything.backend {
    min-height: 60px;
    border: 1px solid #d1d1d1;
}

.slider-anything.backend .block-editor-inner-blocks {
    width: 100%;
}

.slider-anything.backend .block-editor-block-list__layout {
    display: flex;
    flex-flow: column wrap;
}

.slider-anything.backend .block-editor-block-list__layout>* {
    /* width: 20%; */
    display: inline-block;
    /* max-width: 20%; */
}

.slider-anything.backend .block-editor-block-list__layout>* img {
    max-width: 100%;
}

.slider-anything.backend .slider-anything-container {
    opacity: 1;
}

.slider-anything {
    position: relative;
    overflow: visible;
}

.slider-anything-controls .next:hover {
    opacity: 0.7;
}

.slider-anything .slider-anything-container {
    display: flex;
    opacity: 0;

}

.slider-anything.slider-loaded .slider-anything-container {
    opacity: initial;
    display: block;
    overflow: hidden;
    transition: all 500ms ease;
}

.slider-anything-controls {
    opacity: 0;
}

.slider-anything.slider-loaded .slider-anything-controls {
    opacity: 1;
    transition: all 500ms ease;
}

.slider-anything .slider-anything-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.slider-anything .slider-anything-dot {
    cursor: pointer;
    padding: 10px;
}

.slider-anything .slider-anything-dot:not(.slider-anything-dot--visible){
    display:none;
}

.slider-anything .slider-anything-dot span{
    width: 12px;
    height: 12px;
    border-radius:100%;
    border:1px solid black;
    display: block;
}

.slider-anything-controls > * {
    pointer-events:all;
}

.slider-anything-controls .prev {
    left: 0;
}

.slider-anything-controls .next {
    right: 0;
}


.slider-anything .slider-anything-dot:hover span{
    background: grey;
}

.slider-anything .slider-anything-dot.tns-nav-active span{
    background: black;
}


.slider-anything-controls {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}


/* -------------------------------------------- NAV NATIVE -------------------------------------------- */

.slider-anything.nav-native .slider-anything-controls .prev,
.slider-anything.nav-native .slider-anything-controls .next {
    position: absolute;
    top: calc(50% - 36px);
    cursor: pointer;
}

.slider-anything.nav-native .slider-anything-controls .prev {
    left:0;
}

.slider-anything.nav-native .slider-anything-controls .next {
    right:0;
}

/* -------------------------------------------- NAV COMPACT -------------------------------------------- */

.slider-anything.nav-compact .slider-anything-controls {
    width: 100%;
    width: fit-content;
    margin: auto;
}

.slider-anything.nav-compact .slider-anything-controls .prev {
    position: initial;
}

.slider-anything.nav-compact .slider-anything-controls  {
    display: grid;
    grid-template-areas:
        "prev dots next";
    align-items: end;
    gap: 2rem;
    margin-top: 40px;
    grid-area: controls;
    position: relative;
}

.slider-anything.nav-compact .slider-anything-controls .prev,
.slider-anything.nav-compact .slider-anything-controls .next {
    width: 40px;
    height: 40px;
    border: 1px solid black;
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1;
}

.slider-anything.nav-compact .slider-anything-controls .prev
{
    grid-area:prev;
    margin-bottom: auto;
    margin-top: auto;
}

.slider-anything.nav-compact .slider-anything-controls .next
{
    grid-area:next;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: auto;
}

.slider-anything.nav-compact .slider-anything-controls .prev:hover,
.slider-anything.nav-compact .slider-anything-controls .next:hover {
    background:black;
}

.slider-anything.nav-compact .slider-anything-controls .prev:hover img,
.slider-anything.nav-compact .slider-anything-controls .next:hover img {
    filter: invert(1);
}


@media screen and (max-width: 768px) {
    .slider-anything-controls>div>img {
        transform: scale(.65);
    }

    .slider-anything.nav-compact .slider-anything-controls {
        gap: 1rem;
    }

    .slider-anything .slider-anything-dot {
        padding:10px 5px;
    }

    .slider-anything .slider-anything-dots {
        gap:0.1rem;
    }

}