@charset "utf-8";

$bg-color : rgba(64, 170, 107, 0.3);
$text-color:  #42b983;

.__uploader_hidden {
    display: none;
}

.__uploader_host {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 1.1em;
}

%uploader {
    height: 8em;
}

.__uploader_file {
    opacity: 0;
    //width: 100%;
    //height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    //z-index: 10;
}

.__uploader_file_upload_area {
    background-color: $bg-color;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    width: 100%;
    border-radius: 4px;
    position: relative;
    min-width: 12.8em;
    text-align: center;
    z-index: 10;

    @extend %uploader;
}

.is-dragover {
    background-color: grey;
}

.__uploader_drag_text {
    position: relative;
    top: 2em;
    color: $text-color;
}

%flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin-block-start: 0em;
    padding-inline-start: 0em;

    a {
        text-decoration: none;
        color: $text-color;

        &:visited {
            color: $text-color;
        }
    }
}

.__uploader_folder_select {
    border: 0.1em solid;
    border-radius: 0.4em;
    border-color: $text-color;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    //width:12em;
    height: 3em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    cursor: pointer;
    flex-direction: row;

    @extend %flex;
}

.__uploader_folder_click {
    display: inline;
    top: -0.3em;
    position: relative;
    padding-right: 0.6em;
    //margin-top: 0.3em;
}

.__uploader_folder_img {
    list-style: none;
    padding: 1.2em 1.2em 1.2em 1.2em;
    margin: 0em;
    margin-bottom: .5em;
    margin-left: 1em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2em;
    background-image: unquote("svg-load('../../assets/upload-folder-icon.svg')");
    filter: invert(100%) brightness(0.1) sepia(1) hue-rotate(124deg) saturate(45);
}

.__uploader_button {
    border: .07em solid;
    border-radius: .2em;
    border-color: $text-color;
    margin-left: auto;
    margin-right: auto;
    margin-top: .8em;
    margin-bottom: .8em;
    width: 18em;
    height: 2em;
    padding: .1em;
    cursor: pointer;
    display: table-cell;
    padding-top: .7em;
    text-align: center;
}

.__uploader_file_list {
    @extend %flex;

    flex-direction: column;

    li {
        margin: .2em 0em .2em 0em;
        width: 100%;
        text-align: center;
    }
}

.__uploader_percentage {
    border-radius: .2em;
    background-color: lightgrey;
    height: 2em;
    position: relative;

    div {
        border-radius: .2em;
        position: absolute;
        width: 10em;
        height: 2em;
        //margin: 1rem auto;
        background-image:

            repeating-linear-gradient(
                45deg,
                $bg-color,
                $bg-color  1rem,
                $text-color 1rem,
                $text-color 2rem
            );
        background-size: 200% 200%;
        animation: __uploader_barber_pole 10s linear infinite;
        text-align: center;
        z-index: 1;
    }

    span {
        z-index: 100;
        position: absolute;
        left: 0em;
        width: 100%;
    }
}

@keyframes __uploader_barber_pole {
    100% {
        background-position: 100% 100%;
    }
}

@mixin button-image($file) {
    padding: 0em .8em 0em 1.2em;
    //margin-left: -1.4em;
    margin: 0em 0em 0em -1.4em;
    margin-bottom: .5em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.6em;
    background-image: unquote("svg-load(") $file unquote(")");
    filter: invert(100%) brightness(0.1) sepia(1) hue-rotate(124deg) saturate(45);
}

.__uploader_btn_img_options {
    @include button-image('../../assets/options.svg');
}

.__uploader_btn_img_pause {
    @include button-image('../../assets/pause.svg');
}

.__uploader_btn_img_play {
    @include button-image('../../assets/play.svg');
}

.__uploader_btn_img_quit {
    @include button-image('../../assets/quit.svg');
}

.__uploader_btn_img_gear {
    @include button-image('../../assets/gear.svg');
}

.__uploader_btn_img_ok {
    @include button-image('../../assets/OK.svg');
}

.__uploader_notify {
    border: 0.07em solid;
    border-radius: 0.2em;
}

.__uploader_notify_error {
    border-color: red;
    background-color: lightcoral;
}

.__uploader_notify_quitted {
    border-color: yellow;
    background-color: lightyellow;
}

.__uploader_notify_success {
    border-color: $text-color;
    background-color: $bg-color;
}

//dialog styles will override these ones
@import "./dialog.scss";

.cu-modal-config-area {
    margin: auto;
    padding: 2em;
}

.cu-modal-config-chunk-size {
    border: 5px solid white;
    box-shadow:
        inset 0 0 8px  rgba(0, 0, 0, 0.1),
        0 0 16px rgba(0, 0, 0, 0.1);
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 0 10px 0;
}