.is-layout-constrained {
    [data-custom-block="tabs"] {
        margin-block: 0;
    }
}

.wp-block-group[data-custom-block="tabs"] {
    --offset_top: 58px;

    &.overflowing {
        > * {
            align-items: center;
            &::after {
                content: "\e007";
                font-family: "classvr_v3_icons";
                font-size: 1em;
            }
        }

        .wp-block-buttons {
            &:first-child {
                overflow-y: hidden;
                overflow-x: auto;
            }

            &.is-content-justification-center {
                justify-content: left;
            }
        }
    }

    &.is-sticky {
        background-color: var(--wp--preset--color--primary-navy-900);
        color: white;
    }

    top: calc(var(--offset_top) + var(--wp-admin--admin-bar--position-offset, 0px));
    background-color: var(--wp--preset--color--white);

    @media (width > 1024px) {
        padding: var(--wp--preset--spacing--x-small);
    }

    position: sticky;
    z-index: 2;

    .wp-block-buttons {
        &:first-child {
            gap: var(--wp--preset--spacing--small);
            grid-auto-flow: column;
            grid-auto-columns: max-content;
            scrollbar-width: none;
            display: grid;

            > * {
                padding-block: var(--wp--preset--spacing--x-small);
                position: relative;
                width: 100%;
            }
        }

        &:last-child {
            width: 30%;

            /*@media (width < 840px) {
                display: none;
            }*/
        }
    }

    .wp-block-button {
        &.is-style-link {
            .wp-element-button {
                &::after {
                    position: absolute;
                    content: "";
                    height: 4px;
                    width: 100%;
                    bottom: 10px;
                    left: 0;

                    @media (width > 1024px) {
                        bottom: 0;
                    }
                }

                &:hover {
                    &::after {
                        background-color: var(--wp--preset--color--primary-orange-300);
                    }
                }
            }

            &.active {
                .wp-element-button {
                    &::after {
                        background-color: var(--wp--preset--color--primary-orange-900);
                    }
                }
            }
        }
    }
}