.op3-element[data-op3-element-type="tabsheaderitem"] {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;

    > [data-op3-element-container] {
        display: grid;
        grid-template-columns: minmax(auto, max-content);
        grid-template-areas: "media text";
        gap: 10px;
        align-items: center;
        z-index: 0;

        [data-op3-border] {
            z-index: -1;
        }

        .op3-icon {
            grid-area: media;
            display: none;
        }

        .op3-image {
            grid-area: media;
            display: none;
        }

        .op3-text {
            grid-area: text;

            p {
                margin-bottom: 0;
            }
        }

        .op3-icon,
        .op3-image {
            align-self: center;
            width: 1em;
            flex-shrink: 0;
            flex-grow: 0;
            font-size: 100%;
            line-height: inherit;
            text-align: center;
            transition: inherit;

            &::before,
            svg {
                line-height: inherit;
            }
        }

        &[data-op3-block-display-media="image"] .op3-image,
        &[data-op3-block-display-media="icon"] .op3-icon {
            display: flex;
        }

        &[data-op3-block-display-media="none"] {
            gap: 0px !important;
        }
    }
}

@mixin tabsheaderitemBlockLayout($device) {
    .op3-element[data-op3-element-type="tabsheaderitem"] {
        [data-op3-element-container][data-op3-block-layout-#{$device}="0"] {
            grid-template-areas: "media text";
        }

        [data-op3-element-container][data-op3-block-layout-#{$device}="1"] {
            grid-template-areas: "text media";
        }

        [data-op3-element-container][data-op3-block-layout-#{$device}="2"] {
            grid-template-areas: "media" "text";
            justify-items: center;
        }

        [data-op3-element-container][data-op3-block-layout-#{$device}="3"] {
            grid-template-areas: "text" "media";
            justify-items: center;
        }
    }
}

@media (min-width: $breakpoint-tablet) {
    @include tabsheaderitemBlockLayout(desktop);
}

@media (max-width: $breakpoint-tablet) and (min-width: $breakpoint-mobile) {
    @include tabsheaderitemBlockLayout(tablet);
}

@media (max-width: $breakpoint-mobile) {
    @include tabsheaderitemBlockLayout(mobile);
}