.opui-flow-list {
    max-width: 650px;
    margin: 0 auto 30px auto;

    ul {
        gap: 0 !important;
    }

    li {
        position: relative;
        padding: 0 0 62px 0;
    }

    .opfl-trigger-item, .opfl-action-item, .opfl-delay-item {
        cursor: pointer;
    }

    .opfl-trigger-item .opui-item {
        // background: $color--opui-green100 !important;
    }

    .opfl-action-item .opui-item {
        // background: hsla(27, 98%, 54%, 7%) !important;
    }

    .opfl-delay-item .opui-item {
        // background: hsla(197, 98%, 54%, 7%) !important;
    }

    .opui-item {
        isolation: isolate;
        position: relative;
        border: 1px solid #D0D5DD;
        border-radius: 8px;
        box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
        text-align: left;
        transition: all ease-in-out 200ms;

        .opui-title h3 a {
            color: #101828 !important;

            &:hover {
                color: $color--opui-blue;
            }
        }

        .opui-title p a {
            color: #475467 !important;

            &:hover {
                color: $color--opui-blue;
            }
        }

        .opui-title h3 {
            margin: 0 0 20px 0;
        }

        .opui-title p {
            margin: 0 0 2px 0 !important;
        }

        &:hover {
            box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
        }
    }

    .op-flow-icon {
        cursor: pointer;
        position: relative;
        display: flex;
        border: 1px solid #dfe2e8;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        overflow: hidden;
        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
        font-size: 24px;
        color: #666;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        span, i, .opui-fa {
            margin: 0 !important;
        }

        .opui-fa-wordpress {
            color: #0073aa;
        }

        .opui-fa-clock-o, .opui-fa-hourglass {
            color: #c15a2d;
        }

        img {
            max-width: 28px;
            max-height: 28px;
        }

        .opui-icon-logo {
            position: relative;
            top: 5px;
            color: $color--opui-blue;
        }
    }

    .opfl-delay-item .op-flow-icon i {
        color: #bb5127;
    }

    .op-flow-connector {
        position: absolute;
        height: 60px;
        width: 1px;
        overflow: visible;
        background: #D0D5DD;
        bottom: 2px;
        left: 50%;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -3px;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 3px solid transparent;
            border-top: 6px solid #D0D5DD;
        }

        .opui-flow-connector-add {
            position: absolute;
            top: 19px;
            transform: translateX(-9px);
            background: #fff;
            border: 1px solid #D0D5DD;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            display: inline-block;
            vertical-align: middle;
            transition: all linear 0.3s;

            &:before, &:after {
                content: '';
                position: absolute;
                inset: 0;
                background-color: #667085;
                transition: all linear 0.3s;
            }

            &:before {
                width: 2px;
                margin: 5px auto;
            }

            &:after {
                margin: auto 5px;
                height: 2px;
                box-shadow: none;
            }

            &:hover {
                border-color: $color--opui-blue;
            }

            &:hover:before, &:hover:after {
                background-color: $color--opui-blue;
            }
        }
    }

    li:last-child {
        padding-bottom: 42px;

        .op-flow-connector {
            height: 40px;

            &::after {
                display: none;
            }

            .opui-flow-connector-add {
                top: 26px;
                transform: translateX(-12px);
                width: 26px;
                height: 26px;

                &:before{
                    margin: 7px auto;
                }
                &:after{
                    margin: auto 7px;
                }
            }
        }
    }

    .opui-item:hover .op-flow-actions {
        display: block;
    }

    .op-flow-actions {
        position: absolute;
        z-index: 2;
        top: -20px;
        right: 0;
        font-size: 12px;
        display: none;
        padding-bottom: 10px;

        a {
            margin-left: 16px;
            color: #777 !important;
            transition: all ease-in-out 100ms;
        }

        a:hover {
            color: $color--opui-blue;
        }
    }
}