.op3-element[data-op3-element-type="verticaltabsnavigationitem"] {
    transition: 0.4s ease;

    .op3-element-verticaltabsnavigationitem__container {
        display: block;
        height: 100%;
        padding: 1.5em 1em;
        border-top: 1px solid #ddd;
        transition: 0.4s ease;
    }

    &:first-child,
    .op3-element[data-op3-element-spec="verticaltabsnavigationtitle"] + & {
        .op3-element-verticaltabsnavigationitem__container {
            border-width: 0;
        }
    }

    .op3-element-verticaltabsnavigationitem__children {
        display: flex;
        height: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1em;
    }

    .op3-element[data-op3-element-spec="verticaltabsnavigationitemheader"] {
        // Navigation item headler link margins and paddings adjustment:
        // use .op3-element-verticaltabsnavigationitem__container element's
        // padding and margin as negative padding.
        margin: -1.5em -1em;
        padding: 1.5em 1em;

        > [data-op3-children] {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 1em;
        }
    }

    .op3-element[data-op3-element-spec="verticaltabsnavigationitemicon"],
    .op3-element[data-op3-element-spec="verticaltabsnavigationitemdropdownicon"] {
        .op3-icon {
            font-size: inherit;
        }
    }

    .op3-element[data-op3-element-spec="verticaltabsnavigationitemicon"] {
        font-size: 18px;
    }

    .op3-element[data-op3-element-spec="verticaltabsnavigationitemdropdownicon"] {
        font-size: 14px;

        .op3-icon-svg {
            transition: 0.4s ease;
        }
    }

    .op3-element[data-op3-element-spec="verticaltabsnavigationitemtitle"] {
        flex: 1;
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        text-align: left;

        [data-op3-contenteditable] > * {
            font-size: inherit;
            font-weight: inherit;
            text-align: inherit;
        }
    }

    // Don't display unless element is active (or in activation/deactivation
    // pending state). Using :where so we do not increase CSS specificity for
    // this rule.
    &:where(:not(.jquery-vertical-tabs__item--active):not(.jquery-vertical-tabs__item--activating):not(.jquery-vertical-tabs__item--deactivating)) {
        .op3-element[data-op3-element-type="verticaltabsnavigationitemcontent"] {
            display: none;
        }
    }

    // Alternate dropdown icon.
    .op3-element[data-op3-element-spec="verticaltabsnavigationitemdropdownicon"] {
        .op3-icon {
            display: inline-block;
        }

        .op3-icon1::before,
        .op3-icon1 .op3-icon-svg {
            opacity: 1;
        }

        .op3-icon2::before,
        .op3-icon2 .op3-icon-svg {
            opacity: 0;
        }
    }

    &.jquery-vertical-tabs__item--active:not(.jquery-vertical-tabs__item--deactivating),
    &.jquery-vertical-tabs__item--activating {
        .op3-element[data-op3-element-spec="verticaltabsnavigationitemdropdownicon"] {
            .op3-icon1::before,
            .op3-icon1 .op3-icon-svg {
                opacity: 0;
            }

            .op3-icon2::before,
            .op3-icon2 .op3-icon-svg {
                opacity: 1;
            }
        }
    }

    // No animation.
    [data-op3-vertical-tabs-content-animation=""] & {
        &,
        .op3-element[data-op3-element-spec="verticaltabsnavigationitemdropdownicon"] {
            transition: none !important;
        }
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for navigation link on frontend.
#op3-designer-element .jquery-vertical-tabs__nav-item-link.jquery-vertical-tabs__nav-item-link {
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    text-transform: inherit;
    text-shadow: inherit;
    color: inherit;
}