/**
 * Main Style Sheet
 */

#wpadminbar {
    li#wp-admin-bar-instawp-template-migrate {
        a,
        a:active,
        a:focus,
        a:visited,
        a:hover {
            background: #6b2fad;
            color: #f1f1f1;
            outline: none;
            border: none;
            box-shadow: none;
            padding-left: 28px;
            padding-right: 28px;
        }
    }

    li#wp-admin-bar-instawp_staging_site {
        a,
        a:active,
        a:focus,
        a:visited,
        a:hover {
            background: #ea580c;
            color: #f1f1f1;
            outline: none;
            border: none;
            box-shadow: none;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;
        }
    }

    li#wp-admin-bar-instawp_mig_in_progress {
        a,
        a:active,
        a:focus,
        a:visited,
        a:hover {
            background: #11a472;
            color: #f1f1f1;
            outline: none;
            border: none;
            box-shadow: none;
            padding-left: 30px;
            padding-right: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;

            &:before {
                content: ' ';
                position: absolute;
                height: 10px;
                width: 10px;
                top: 50%;
                left: 16px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                border: 3px solid rgb(255 255 255 / 20%);
                border-right-color: #fff;
                animation: loading 1s linear infinite;
                margin: -8px -8px;
                padding: 0;
            }
        }
    }

    li#wp-admin-bar-instawp-go-live {
        a,
        a:active,
        a:focus,
        a:visited,
        a:hover {
            background: #10a372;
            color: #f1f1f1;
            outline: none;
            border: none;
            box-shadow: none;
            padding-left: 28px;
            padding-right: 28px;
            transition: 0.3s;
        }

        &.loading {
            position: relative;
            transition: 0.3s;

            &:after {
                content: ' ';
                position: absolute;
                height: 10px;
                width: 10px;
                top: 50%;
                left: 16px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                border: 3px solid rgb(255 255 255 / 20%);
                border-right-color: #fff;
                animation: loading 1s linear infinite;
                margin: -8px -8px;
            }
        }
    }

    li#wp-admin-bar-instawp {
        > a {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &.recording-on {
            > a {
                &:before {
                    content: "\f1131";
                    width: 12px;
                    height: 12px;
                    background-color: #E91E63;
                    border-radius: 50%;
                    animation-name: blink;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    box-sizing: border-box;
                }
            }
        }
    }
}

body {
    &.tools_page_instawp {
        #wpadminbar {
            li#wp-admin-bar-instawp_mig_in_progress {
                a,
                a:active,
                a:focus,
                a:visited,
                a:hover {
                    &:before {
                        height: 16px;
                        width: 16px;
                    }
                }
            }
        }
    }
}

.deactivate-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    z-index: 999999;

    .deactivate-modal-content {
        background-color: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        max-width: 24rem;
        width: 100%;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);

        h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        p {
            font-size: 14px;
            line-height: 21px;
            margin-bottom: 1rem;
        }

        .deactivate-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;

            .deactivate-modal-cancel {
                padding: 0.5rem 1rem;
                background-color: #166534;
                border-radius: 0.375rem;
                border: none;
                cursor: pointer;
                color: #f1f1f1;
            }

            .deactivate-modal-confirm {
                padding: 0.5rem 1rem;
                background-color: #fee2e2;
                border-radius: 0.375rem;
                border: none;
                cursor: pointer;
            }
        }
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}