// color --------------------
$main-color: #0a66c2;
$highlight-color: #ff0;
// ---------------------------

body.linkedin-jobs-scraper {
    .main-export-container.linkedin-jobs-scraper-container {
        width: 400px;
        display: block;
        padding: 5px 12px;
        background: $main-color;
        margin-top: 5px;
        border: 1px solid $main-color;
        position: fixed;
        z-index: 999999;
        top: 0;
        left: 0;
        margin: 10px;
        cursor: move;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.65) 1px 3px 11px 0px;

        & .is-hidden {
            display: none !important;
        }

        &:hover .export-panel-close-btn {
            display: block;;
        }

        .export-header-title {
            text-align: center;
            padding: 10px 0 0 0;
            color: #fff;
            font-weight: 400;
            font-size: 15px;
            display: block;
        }

        .export-footer {
            text-align: center;
            font-size: 12px;
            color: #ccc;
            margin: 10px 0 5px 0;
        }

        .export-footer a {
            color: #eee;
        }

        .export-footer a:hover,
        .export-footer a:visited {
            color: #fff;
            text-decoration: underline;
        }

        .export-buttons {
            margin: 10px 0;
        }

        .export-buttons > button {
            width: 100%;
            margin: 3px 0;
            border: none;
            background: none;
            outline: none;
            color: rgb(22, 24, 35);
            font-weight: 700;
            flex: 0 0 auto;
            cursor: pointer;
            padding: 8px 15px;
            background: #fff;
            border-radius: 5px;
        }

        .export-buttons > button:active {
            color: rgb(237, 53, 75);
            background-color: #fff;
        }

        .export-buttons > button:hover {
            color: rgb(237, 53, 75);
            background-color: #fff;
        }

        .export-status {
            text-align: center;
            padding: 10px 0;
            color: #fff;
        }

        .export-status-text {
            font-size: 13px;
        }

        .export-progress-text {
            margin-top: 5px;
            font-size: 12px;

            &:empty {
                display: none !important;
            }

            color: #ddd;

            i {
                font-style: normal;
                color: #eee;
                font-weight: bold;
            }

            .export-progress-done {
                color: #0f0;
                font-weight: bold;
            }

            .export-progress-error {
                color: #f00;
                font-weight: bold;
            }
        }

        .export-upgrade-link {
            text-transform: uppercase;
            font-weight: bold;
            color: $highlight-color;
            cursor: pointer;
            padding: 5px;
            display: inline-block;
            text-decoration: underline;
        }

        .export-upgrade-link:hover {
            text-decoration: underline;
        }

        .export-start-btn{
            span:nth-child(2) {
                display: none;
                color: #808080;
                margin-left: 5px;
            }

            i {
                font-style: normal;
                color: #f00;
            }
        }

        &.export-show-continue-btn {
            .export-start-btn{
                span:nth-child(2) {
                    display: inline-block;
                }
            }
        }

        .export-continue-btn {
            position: relative;
            display: none;

            span:nth-child(2) {
                color: #808080;
                margin-left: 5px;
            }

            i {
                position: absolute;
                right: 0;
                top: 0;
                margin: -5px;
                width: 22px;
                height: 22px;
                font-size: 13px;
                background: #ff0202;
                border-radius: 50%;
                display: none;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-style: normal;
                cursor: help;
            }
        
            &:hover {
                i {
                    display: flex;
                }
            }
        }

        &.export-show-continue-btn .export-continue-btn {
            display: block;
        }

        .export-loading {
            position: relative;
            margin: 5px;
            top: 5px;
        }

        .export-status-logout {
            text-align: center;
            font-size: 12px;
            background: #fff;
            border-radius: 3px;
            padding: 5px;
            margin: 0;
        }

        .export-panel-close-btn {
            display: none;
            position: absolute;
            top: -8px;
            right: -8px;
            padding: 5px;
            border-radius: 50%;
            background: #fff;
            font-size: 0;
            cursor: pointer;
            box-shadow: 0px 0 8px 1px rgba(34, 34, 34, 0.13);
            transition: all 0.3s;

            &:hover {
                transform: rotate(90deg);
            }
        }

        .export-error {
            color: #ff5050;
            background: #222;
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 13px;
            margin-top: 6px
        }
    }
}

.voyager-eb-inner-container {
    position: relative;
}

.voyager-eb-inner-container > * {
    display: inline-block !important;
}

.scrape-btn.linkedin-jobs-scraper {
    position: relative;
}

.jobs-search-box__container.jobs-search-box .scrape-btn.linkedin-jobs-scraper {
    margin-left: 10px;
}

.workflow-results-container > h1 > .scrape-btn.linkedin-jobs-scraper {
    margin: 0 10px;
}

.guest-eb-inner-container .scrape-btn.linkedin-jobs-scraper {
    display: block;
    margin-top: 10px;
}

.scrape-btn.linkedin-jobs-scraper.is-hidden {
    display: none !important;
}

.scrape-btn.linkedin-jobs-scraper {
    &.button-type-1-1 {
        white-space: nowrap;
        margin-left: 5px;
    }

    &.button-type-3 {
        position: absolute;
        top: 0;
        right: 0;
        margin: 25px 23px;
    }

    button {
        background: rgb(3, 162, 88);
        border: 1px solid rgb(3, 162, 88);
        border-radius: 20px;
        color: white;
        outline: none;
        padding: 0px 12px;
        width: auto;
        font-weight: 700;
        font-size: 14px;
        height: 32px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;

        .eb-help-btn {
            position: absolute;
            right: 0;
            top: 0;
            margin: -5px;
            width: 20px;
            height: 20px;
            font-size: 12px;
            color: #fff;
            background: #ff0202;
            border-radius: 50%;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: help;
        }

        &:hover {
            background: rgb(1, 199, 107);
            border: 1px solid rgb(1, 199, 107);

            .eb-help-btn {
                display: flex;
            }
        }

        svg {
            margin-left: 5px;
        }
    }
}

.voyager-eb-typeahead-inner-container {
    flex-direction: row;
}

body.linkedin-jobs-scraper-scrape-btn-container .scrape-btn.linkedin-jobs-scraper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    margin: 20px;
    background: rgba(0,0,0,0.3);
    padding: 8px;
    border-radius: 5px;
}