.op-dashboard-integrations {
    .op-dashboard-new-connection {
        .opui-item-description {
            margin-bottom: 20px;
        }
    }

    .opd-connected-integrations {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(275px, 1fr));
        gap: 30px;

        .opd-connected-integration-item {
            display: flex;
            flex-direction: column;
            min-height: 350px;
            border: 1px solid var(--opui--gray200);
            border-radius: var(--opui--border-radius);
            box-shadow: var(--opui--box-shadow);
            overflow: hidden;
        }

        .opd-integration-logo {
            flex-basis: 30%;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #f2f6fa;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 60px;
            }
        }

        .opd-integration-data {
            display: flex;
            flex-direction: column;
            flex-basis: 70%;
            padding: 20px 30px;

            .opd-integration-title {
                margin-bottom: 20px;
                font-weight: 600;
                color: $color__ops-black;
            }

            .opd-integration-description {
                font-size: 14px;
                margin-bottom: 20px;
            }
        }

        .opd-integration-actions {
            display: flex;
            justify-content: space-between;
            margin-top: auto;
            gap: 10px;

            a {
                width: 100%;
            }
        }
    }
    
    .js-disconnect-integration-connection {
        .hover-text {
            display: none;
        }
    
        &:hover .hover-text {
            display: inline-block;
        }
    
        &:hover .text {
            display: none;
        }
    }
    
    .js-connect-integration-connection {
        .hover-text {
            display: none;
        }
    
        &:hover .hover-text {
            display: inline-block;
        }
    
        &:hover .text {
            display: none;
        }
    }
    
}

.opd-dashboard-integrations-list {
    .opd-dashboard-integrations-list-item {
        position: relative;
        width: 33.3%;
        margin-bottom: 30px;

        &.opd-hide {
            display: none;
        }

        .ops-white-box {
            box-sizing: border-box;
            margin: 0 15px;
            border: 1px solid $color__ops-borderLight;

            h4 {
                font-size: 16px;
            }

            .opd-integration-enter-credentials-btn, .opd-integration-enter-oauth-credentials-btn {
                display: block;
            }

            img.opd-integration-logo {
                margin-bottom: 15px;
            }

            .opd-integration-enter-credentials-form, div.opd-integration-enter-oauth-credentials-form {
                display: block;
                text-align: left;
                margin-top: 0;
                max-height: 0;
                overflow: hidden;
                transition: $transition__maxHeight-margin-linear;

                .ops-button {
                    min-width: 100%;
                }

                input {

                }
            }

            div.opd-integration-connect {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.9);
                opacity: 0;
                transition: $transition__opacity-linear;

                &:hover {
                    opacity: 1;
                }

                a.opd-integration-connect-choose {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    min-width: 70%;
                }
            }
        }

        .opd-dashboard-integration-actions {
            display: none;
            position: absolute;
            top: 17px;
            right: 30px;
            font-size: 18px;
            z-index: 5;

            i {
                cursor: pointer;

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

        &.opd-open {
            .ops-white-box {
                div.opd-integration-connect {
                    display: none;
                }

                .opd-integration-enter-credentials-form, div.opd-integration-enter-oauth-credentials-form {
                    max-height: 500px;
                    margin-top: 25px;
                }
            }

            &[data-opd-direct-oauth="1"] .opd-dashboard-integration-actions {
                display: block;
            }
        }
    }
}

.opd-dashboard-integrations-list-item {
    .opd-dashboard-integration-actions {
        display: none;
    }

    .ops-white-box {
        .d-flex {
            & > div {
                width: 100%;
            }
        }

        .opd-integration-enter-credentials-btn, .opd-integration-enter-oauth-credentials-btn {
            display: none;
        }
    }
}

.oauth-connection-actions {
    .opd-integration-enter-oauth-credentials-form-submit-btn {
        display: inline-block;
    }

    .opd-integration-connect-choose {
        display: none;
    }

    &.opd-connection-actions-for-connected {
        .opd-integration-enter-oauth-credentials-form-submit-btn {
            display: none;
        }

        &.opd-connection-edit-actions-for-connected .opd-integration-enter-oauth-credentials-form-submit-btn {
            display: inline-block;
        }

        .opd-integration-connect-choose {
            margin-top: 20px;
            display: inline-block;
        }
    }
}