/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.seoaic-interactive-article-block {
    padding: 40px 15px 20px 15px;
    background-color: #f3f4f5;
    color: #100717;
    position: relative;
    border-radius: 5px;

    &:hover {
        &::before {
            opacity: 1;
        }
    }

    &::before {
        position: absolute;
        content: "Interactive article block";
        top: 4px;
        right: 15px;
        font-size: 22px;
        font-family: "Archivo", sans-serif;
        font-weight: 600;
        color: #100717;
        background: #ff4893;
        background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0.6;
        transition: opacity 0.3s linear;
    }

    .seoaic-interactive-article-block-content {
        background-color: #fff;
        padding: 15px;
        width: auto;
        border-radius: 5px;
    }

    .seoaic-ia-id {
        position: absolute;
        top: 10px;
        left: 15px;
        pointer-events: none;
        box-shadow: 0px 0px 9px 0px #000;
        background-color: #545b62;
        color: #fff;
        font-size: 14px;
        border-radius: 7px;
        padding: 0px 7px;
    }

    .seoaic-ia-question {
        font-size: 27px;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .seoaic-ia-options-type {
        .components-flex {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .components-radio-control__option {
            gap: 0;

            input[type="radio"] {
                display: none;

                &:checked + label {
                    background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
                    color: white;
                    border: 1px solid #5d78f7;

                    &:hover {
                        background: linear-gradient(90deg, #5d78f7 -30%, #a551f6 80%);
                    }
                }
            }

            label {
                background-color: #fff;
                border: 1px solid #ddd;
                border-radius: 15px;
                font-weight: bold;
                padding: 7px 15px;
                transition: all 0.15s linear;

                &:hover {
                    background-color: #ddd;
                }
            }
        }
    }

    .seoaic-ms-single-option-row,
    .seoaic-ms-multi-option-row {
        border-radius: 5px;
        padding: 7px 5px 0 5px;
        margin: 6px 0 0 0;
        box-sizing: border-box;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-top: 1px dashed #fff;
            background: linear-gradient(to right, #5d78f7, #a551f6) border-box;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask-composite: add, add;
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
    }

    .seoaic-multistep-form-option {
        label {
            margin-bottom: 0;
        }

        .components-select-control {
            gap: 0;

            select {
                line-height: 30px;
            }
        }
    }

    .seoaic-ms-single-option-row {
        .seoaic-multistep-remove-choice-btn {
            margin-top: 15px;
        }
    }

    .seoaic-ms-move-btns-container {
        position: relative;
        width: 50px;

        button {
            padding: 0;
            min-width: 100%;
        }
    }

    .seoaic-ia-answer-stats {
        position: absolute;
        right: 103%;
        cursor: help;
        padding: 5px 10px;
        background: #000;
        color: #fff;
        border-radius: 10px;
        min-width: 20px;
        text-align: center;
        box-shadow: 0px 0px 5px 0px #000;
    }
}