/**
 * @Author Awen
 * @Date 2024/06/01
 * @Email wengaolng@gmail.com
 **/

:root{
    --go-captcha-theme-text-color: #333333;
    --go-captcha-theme-bg-color: #ffffff;
    --go-captcha-theme-btn-color: #ffffff;
    --go-captcha-theme-btn-disabled-color: #749ff9;
    --go-captcha-theme-btn-bg-color: #4e87ff;
    --go-captcha-theme-btn-border-color: #4e87ff;
    --go-captcha-theme-active-color: #3e7cff;
    --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5);
    --go-captcha-theme-icon-color: #3C3C3C;
    --go-captcha-theme-drag-bar-color: #e0e0e0;
    --go-captcha-theme-drag-bg-color: #3e7cff;
    --go-captcha-theme-drag-icon-color: #ffffff;
    --go-captcha-theme-round-color: #e0e0e0;
    --go-captcha-theme-loading-icon-color: #3e7cff;
    --go-captcha-theme-body-bg-color: #34383e;

    --go-captcha-theme-dot-color: #cedffe;
    --go-captcha-theme-dot-bg-color: #3e7cff;
    --go-captcha-theme-dot-border-color: #f7f9fb;

    --go-captcha-theme-default-color: #3e7cff;
    --go-captcha-theme-default-bg-color: #ecf5ff;
    --go-captcha-theme-default-border-color: #3e7cff;
    --go-captcha-theme-default-hover-color: #e0efff;

    --go-captcha-theme-error-color: #ed4630;
    --go-captcha-theme-error-bg-color: #fef0f0;
    --go-captcha-theme-error-border-color: #ff5a34;

    --go-captcha-theme-warn-color: #ffa000;
    --go-captcha-theme-warn-bg-color: #fdf6ec;
    --go-captcha-theme-warn-border-color: #ffbe09;

    --go-captcha-theme-success-color: #5eaa2f;
    --go-captcha-theme-success-bg-color: #f0f9eb;
    --go-captcha-theme-success-border-color: #8bc640;
}

.go-captcha {
    &.gc-wrapper {
        padding: 12px 16px;
        //background-color: var(--go-captcha-theme-bg-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        box-sizing: border-box;
    }

    &.gc-theme {
        border: 1px solid rgba(206, 223, 254, 0.5);
        border-color: var(--go-captcha-theme-border-color);

        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;

        box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
        -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
        -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);

        &.gc-wrapper {
            background-color: var(--go-captcha-theme-bg-color);
        }
    }

    .gc-header {
        height: 36px;
        width: 100%;
        font-size: 15px;
        color: var(--go-captcha-theme-text-color);

        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items: center;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        span {
            flex: 1;
            padding-right: 5px;
        }

        em {
            padding: 0 3px;
            font-weight: bold;
            color: var(--go-captcha-theme-active-color);
            font-style: normal;
        }
    }

    .gc-body{
        position: relative;
        width: 100%;
        margin-top: 10px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        background: var(--go-captcha-theme-body-bg-color);
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        overflow: hidden;

        .gc-body-inner{
            position: relative;
            background: var(--go-captcha-theme-body-bg-color);
        }
    }

    .gc-picture{
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .gc-hide{
        visibility: hidden;
    }

    .gc-loading{
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 68px;
        height: 68px;
        margin-left: -34px;
        margin-top: -34px;
        line-height: 68px;
        text-align: center;

        display: flex;
        align-content: center;
        justify-content: center;

        svg, circle {
            color: var(--go-captcha-theme-loading-icon-color);
            fill: var(--go-captcha-theme-loading-icon-color);
        }
    }

    .gc-footer{
        width: 100%;
        height: 50px;
        color: #34383e;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display:flex;
        align-items: center;
        padding-top: 10px;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        .icon-block {
            flex: 1;
        }
    }

    .gc-icon-block{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display:flex;
        align-items: center;

        & > *{
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg{
            color: var(--go-captcha-theme-icon-color);
            fill: var(--go-captcha-theme-icon-color);
            margin: 0 5px;
            cursor: pointer;
        }
    }

    .gc-button-block{
        width: 120px;
        height: 40px;

        button{
            width: 100%;
            height: 40px;
            //letter-spacing: 2px;
            text-align: center;
            padding: 9px 15px;
            font-size: 15px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            color: var(--go-captcha-theme-btn-color);
            background-color: var(--go-captcha-theme-btn-bg-color);
            border: 1px solid transparent;
            border-color: var(--go-captcha-theme-btn-bg-color);
            -webkit-appearance: none;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;

            &.disabled {
                pointer-events: none;
                background-color: var(--go-captcha-theme-btn-disabled-color);
                border-color: var(--go-captcha-theme-btn-disabled-color);
            }
        }
    }

    .gc-drag-slide-bar {
        width: 100%;
        height: 100%;
        position: relative;
        touch-action: none;
    }

    .gc-drag-line{
        position: absolute;
        height: 14px;
        background-color: var(--go-captcha-theme-drag-bar-color);
        left: 0;
        right: 0;
        top: 50%;
        margin-top: -7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
    }

    .gc-drag-block {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -20px;
        width: 82px;
        height: 40px;
        z-index: 2;
        background-color: var(--go-captcha-theme-drag-bg-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        border-radius: 24px;

        box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);
        -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);
        -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);

        & > *{
            display: flex;
            align-items: center;
            justify-content: center;
        }

        color: var(--go-captcha-theme-drag-icon-color);
        fill: var(--go-captcha-theme-drag-icon-color);

        &.disabled {
            pointer-events: none;
            background-color: var(--go-captcha-theme-btn-disabled-color);
            border-color: var(--go-captcha-theme-btn-disabled-color);
        }
    }

    .drag-block-inline {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        & > *{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}