.wp-block-goodmills-query-slider-navigation {
    --swiper-theme-color: var(--wp--preset--color--quaternary-dark);
    --swiper-navigation-size: 36px;
    --swiper-navigation-width: var(--swiper-navigation-size);
    --swiper-navigation-height: var(--swiper-navigation-size);
    --swiper-navigation-top-offset: 0%;
    --swiper-navigation-sides-offset: 0%;

    --swiper-navigation-color: #fff;
    --swiper-navigation-opacity: 1;
    --swiper-navigation-hover-color: var(--swiper-theme-color);
    --swiper-navigation-hover-opacity: 1;
    --swiper-navigation-inactive-color: var(--swiper-navigation-color);
    --swiper-navigation-inactive-opacity: 0.2;

    --swiper-navigation-icon-color: var(--swiper-navigation-hover-color);
    --swiper-navigation-icon-hover-color: var( --swiper-navigation-color);
    --swiper-navigation-icon-inactive-color: var(--swiper-navigation-icon-color);

    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.wp-block-goodmills-query-slider-navigation .swiper-buttons {
    position: relative;
    width: calc(2 * var(--swiper-navigation-size) + var(--wp--preset--spacing--40));
    height: var(--swiper-navigation-size);
}

.wp-block-goodmills-query-slider-navigation .swiper-button-prev,
.wp-block-goodmills-query-slider-navigation .swiper-button-next,
.wp-block-goodmills-query-slider-navigation .swiper-button-next.swiper-button-disabled,
.wp-block-goodmills-query-slider-navigation .swiper-button-prev.swiper-button-disabled {
    border: 1.5px solid var(--swiper-theme-color);
    margin-top: 0;
    width: var(--swiper-navigation-width);
    height: var(--swiper-navigation-height);
}

.wp-block-goodmills-query-slider-navigation .swiper-button-prev::after,
.wp-block-goodmills-query-slider-navigation .swiper-button-next::after {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
}

@media (min-width: 768px) {
    .wp-block-goodmills-query-slider-navigation {
        --swiper-navigation-size: 58px;

        justify-content: flex-start;
    }
}