.wc-block-next-previous-buttons {

    &.wp-block.is-style-product-carousel-offset-arrow,
    &.wp-block.is-style-product-carousel-offset-arrow-1,
    &.wp-block.is-style-arrow-with-bottom-line-bar {
        position: static;
    }

    .is-style-product-carousel-offset-arrow,
    &.wp-block.is-style-product-carousel-offset-arrow  button{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;
        border: 1px solid var(--wp--preset--color--neutral-200);
        border-radius: 100%;
        width: 50px;
        height: 50px;

        &:first-child {
            left: -20px;
        }

        &:last-child {
            right: -20px;
        }
    }   

    .is-style-product-carousel-offset-arrow-1,
    &.wp-block.is-style-product-carousel-offset-arrow-1  button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;        
        width: 50px;
        height: 50px;
        color: #fff;
        background: transparent;

        &:first-child {
            left: 11%;
        }

        &:last-child {
            right: 11%;
        }
    }   

    &:has(.is-style-arrow-with-line-bar),
    &.wp-block.is-style-arrow-with-line-bar {
        display: flex;
        position: relative;
        width: 520px;
        justify-content: space-between;
        align-items: center;
     
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 60px;
            right: 60px;
            height: 2px;
            background: var(--wp--preset--color--text-primary);
            transform: translateY(-50%);
            z-index: 0;
            border-radius: 12px;
        }

        button {
            position: relative;
            z-index: 2;
            display: grid;
            place-content: center;
            width: 40px;
            height: 40px;

            &[aria-disabled="true"] {
                cursor: not-allowed;
            }

            &:first-child[aria-disabled="false"]::after,
            &:last-child[aria-disabled="false"]::before {
                content: "";
                position: absolute;
                top: 50%;
                width: 200px;
                height: 2px;
                background: var(--wp--preset--color--neutral-200);
                transform: translateY(-50%);
                z-index: 1;
                border-radius: 12px;
            }

            &:first-child {
                &[aria-disabled="false"]::after {
                    left: 60px;
                }
            }

            &:last-child {
                &[aria-disabled="false"]::before {
                    right: 60px;
                }
            }
        }
    }

}

@media (width >= 80rem) { 
    .wc-block-next-previous-buttons {
        &:has(.is-style-arrow-with-bottom-line-bar),
        &.wp-block.is-style-arrow-with-bottom-line-bar { 
            &:before {
                display: block;
            }

            button {
                &:first-child[aria-disabled="false"]::after,
                &:last-child[aria-disabled="false"]::before {
                    display: block;
                }
            }
        }
    }
}

.is-style-product-carousel-top-arrow {    

    > .wc-block-next-previous-buttons {
        position: absolute;
        top: -60px;
        right: 0;        
        gap: 0;
    }

    .wc-block-next-previous-buttons__button {
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}