.wp-block-tabs{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: unset;
    grid-auto-columns: unset;
    grid-template-rows: auto;
    justify-content: start;
    gap: 30px;
    padding-top: 20px;

    &:not(.block-editor-iframe__body .wp-block-tabs, .wp-admin .wp-block-tabs){
        grid-auto-flow: column;
    }

    .tab-trigger {
        .wp-block-button__link {
            border: 1px solid var(--wp--preset--color--white) !important;
            color: var(--wp--preset--color--white) !important;
            background-color: transparent !important;
        }

        &.active {
            .wp-block-button__link {
                border: 1px solid var(--wp--preset--color--white) !important;
                color: var(--wp--preset--color--primary) !important;
                background-color: white !important;
            }
        }
    }

    .tab-title{
        margin: 0px;
        width: 100%;
        transition-property: opacity;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;

        &:not(.block-editor-iframe__body .tab-title, .wp-admin .tab-title){
            display: grid;
        }
        
        .wp-block-button__link {
            border: 1px solid white;
            border-radius: 20px;
        }
    }

    .tab-content{
        grid-column-start: 1;
        grid-column-end: -1;
        margin: 15px;
        max-height: 100%;
        overflow: hidden;
        transition-property: max-height;
        transition-duration: 0s;
        transition-timing-function: ease-in-out;

        &:not(.block-editor-iframe__body .tab-content, .wp-admin .tab-content){
            &:not(.active) {
                margin: 0 15px !important;
                max-height: 0;
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .wp-block-tabs{
        display: block;
        padding-bottom: 40px;

        .wp-block-tab-item {
            margin-bottom: 10px !important;
        }

        .tab-trigger {
            .wp-block-button__link {
                color: var(--wp--preset--color--white) !important;
            }

            &.active {
                .wp-block-button__link {
                    color: white !important;

                    &:after {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        .tab-title {
            width: 100%;

            .wp-block-button {
                width: 100%;
                display: block;
                border-bottom: 1px solid white;

                .wp-block-button__link {
                    box-sizing: border-box;
                    font-size: 20px !important;
                    padding: 20px 30px 20px 0 !important;
                    width: 100%;
                    position: relative;
                    cursor: pointer;
                    min-height: 24px;
                    transition: all 0.25s;
                    border: 0px !important;
                    border-radius: 0 !important;
                    background: transparent !important;
                    text-align: left;

                    &:hover {
                        /* padding-left: 10px !important; */
                        color: var(--wp--preset--color--primary);
                        background-color: transparent !important;

                        &:after {
                            content: url('data:image/svg+xml,<svg fill="%23AB1638" height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/></svg>')
                        }
                    }
                    
                    &:after {
                        position: absolute;
                        width: 16px;
                        right: 16px;
                        transition: all 0.25s;
                        display: flex;
                        top: 20px;
                        right: 0;
                        align-items: center;
                        justify-content: center;
                        content: url('data:image/svg+xml,<svg fill="%23ffffff" height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/></svg>');
                    }
                }
            }

            
        }

        .tab-content {
            margin: 0 !important;

            > * {
                margin-block-start: 50px !important;
            }
        }
    }
}

.wp-block-tabs-place {
    display: none;
}

@media screen and (min-width: 992px) {
    .wp-block-tabs{
        .tab-content{
            &:not(.block-editor-iframe__body .wp-block-tabs .tab-content, .wp-admin .wp-block-tabs .tab-content){
                display: none !important;
            }
        }

        &:has(.tab-content.active) {
            .tab-title:not(:has(+ .tab-content.active)) {
                .wp-block-button__link {
                    border: 1px solid var(--wp--preset--color--white) !important;
                    color: var(--wp--preset--color--white) !important;
                    background-color: transparent !important;
    
                    &:hover {
                        border: 1px solid var(--wp--preset--color--white) !important;
                        color: var(--wp--preset--color--primary) !important;
                        background-color: white !important;
                    }
                }
            }
        }
    }
    .wp-block-tabs-place {
        padding-top: 20px;
        display: block;
    }
}