.op3-element[data-op3-element-type="numberblockitem"] {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    min-height: 16px;
    counter-increment: numberblock;

    --op3-box-shadow-width:3px;

    // This will prevent element grow when child title or text has word wider
    // than flex-basis.
    min-width: 0;

    // Custom flex-basis will work only if responsive columns are set to wrap
    // or stack (see below).
    //
    // Note:
    // Flex basis doesn't take gap in consideration. For example, having two
    // columns with some gap and setting flex-basis to 50% will stack columns.
    //
    // Important:
    // Accurate flex-basis rule here would be the same as for devices below,
    // but we can not use complicated rules be cause editor needs computed
    // value to be number with unit, not calc value...
    flex-basis: calc(100% / var(--op3-flex-basis-steps));

    @media (min-width: ($breakpoint-tablet + 1)) {
        .op3-element-numberblock__children:not([data-op3-wrap-columns-desktop="1"]):not([data-op3-stack-columns-desktop="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    @media (max-width: $breakpoint-tablet) and (min-width: ($breakpoint-mobile + 1)) {
        .op3-element-numberblock__children:not([data-op3-wrap-columns-tablet="1"]):not([data-op3-stack-columns-tablet="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    @media (max-width: $breakpoint-mobile) {
        .op3-element-numberblock__children:not([data-op3-wrap-columns-mobile="1"]):not([data-op3-stack-columns-mobile="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    .op3-element-numberblockitem__container {
        position: relative;
        display: flex;
        height: 100%;
        padding: 20px;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid #efeeee;
        border-radius: 5px;
        overflow: visible;
        overflow-wrap: break-word;
        transition: inherit;
    }

    .op3-element-numberblockitem__children {
        display: grid;
        min-width: 0;
        align-content: flex-start;
    }

    .op3-element-numberblockitem__number {
        display: flex;
        position: relative;
        width: 1.5em;
        height: 1.5em;
        margin: 0 20px 10px 20px;
        padding: 20px;
        align-items: center;
        justify-content: center;
        border: 0 none;
        box-shadow: none;
        flex-grow: 0;
        overflow: hidden;
        color: #fff;
        z-index: 50;

        &::before {
            content: counter(numberblock);
            color: inherit;
            font-weight: bold;
            z-index: 40;
            white-space: nowrap;
        }

        .op3-element-numberblock__children:not([data-op3-block-display-title="1"]):not([data-op3-block-display-text="1"]) & {
            margin-bottom: 0 !important;
        }

        .op3-element-numberblock__children[data-op3-numberblock-frame="none"] & {
            .op3-element-numberblockitem__background--number::before,
            .op3-element-numberblockitem__background--number::after {
                background: transparent !important;
            }
        }

        .op3-element-numberblock__children[data-op3-numberblock-frame="outline"] & {
            // Adding border to element changes element size. Simulation inner
            // border with box-shadow.
            box-shadow: inset 0px 0px 0px var(--op3-box-shadow-width) currentColor;

            .op3-element-numberblockitem__background--number::before,
            .op3-element-numberblockitem__background--number::after {
                background: transparent !important;
            }
        }

        .op3-element-numberblock__children[data-op3-numberblock-shape="curved"] & {
            border-radius: 10px;
        }

        .op3-element-numberblock__children[data-op3-numberblock-shape="circle"] & {
            border-radius: 50%;
        }
    }

    .op3-element-numberblockitem__background--number {
        &::before,
        &::after {
            background-color: #a8b4f7;
        }
    }

    .op3-element {
        min-width: 0;

        // Property text-align is based on layout and set on numberblockitem
        // element. All the children must inherit this property.
        text-align: inherit;
    }
}