// General content components
/////////////////////////////

.gki_info-bubble {
    background-color: rgba($color: #FFF, $alpha: 0.05);
    border-radius: 10px;
    padding: 20px;
}

.gki_button {
    margin-top: 1rem;
    cursor: pointer;
}

button.gki_button[disabled] {
    opacity: 0.3;
    background-color: unset !important;
    color: unset !important;
    box-shadow: var(--input-shadow);
    &:hover {
        background-color: unset !important;
        color: unset !important;
        box-shadow: var(--input-shadow);
    }
}

.gki_hidden {
    display: none !important;
}


// Settings components
//////////////////////

.gki_setting {
    &.is-disabled {
        display: none;
    }
}

// Increase the width of text and dropdown inputs to their own line on small windows.
.gki_setting:not(.mod-toggle) {
    flex-wrap: wrap;

    .setting-item-info {
        padding-bottom: 0.5em;
    }

    .setting-item-info {
        flex: 1 0 30ch;
    }
    .setting-item-control {
        flex: 1 30ch;
        input, select {
            width: 100%;
        }
    }
}


// Drag and drop file uploader
//////////////////////////////

.gki_drop-frame {
    width: 100%;
    padding: 5.5em 70px;
    margin-top: 2em;
    border-radius: 10px;
    border: 1px white dashed;
    text-align: center;

    &.gki_drag-over-active {
        // User outlines so that thickened border doesn't change layout
        outline: 2px solid white;
        outline-offset: -2px;
        // background-color: rgba(255,255,255,0.1);

        // Prevent children components firing dragleave
        // But only while dragging is active because otherwise it stops the link text working
        * {pointer-events: none;}
    }

    position: relative;
    .gki_highlight {
        position: absolute;
        z-index: -100;
    }
}

#gki_file-input {
    display: none;
}

.gki_file-input_label {
    color: pink;
    text-decoration: underline;
    cursor: pointer;
}

// TODO: Put this inside upload dropzone
.gki_file-upload-summary {
    text-align: center;
}


// Progress modal components
////////////////////////////

.gki_progress-bar {
    width: 100%;
    height: 0.5em;
    border-radius: 10px;
    background-color: #333;
    margin-top: 1em;
    
    .gki_bar {
        width: 50%;
        height: 100%;
        background-color: white;
        border-radius: 10px;
    }
}

.gki_import-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 1rem;

    p {
        text-align: center;
    }

    .gki_import-number {
        font-size: 2em;
        font-weight: 600;
    }
}


// Error log components
////////////////////////

.gki_error-log {
    margin-top: 1rem;
    background-color: rgba($color: #000000, $alpha: 0.3);
    max-height: 0;
    overflow-y: auto;
    border-radius: 6px;
    
    &.gki_visible {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .gki_item {
        font-size: 0.8rem;
        box-sizing: border-box;
        padding: 0 0.8em;
        // setting vertical padding with before and after so that max-height ignores them
        &::before, &::after {
            content: ' ';
            display: block;
            height: 1.2em;
        }
        margin: 0;

        &:nth-of-type(even) {
            background-color: rgba($color: #FFF, $alpha: 0.01);
        }
        
        .gki_item-header {
            margin: 0;
            
            .gki_status {
                font-size: 0.8em;
                padding: 0.25em 0.6em;
                border-radius: 4px;
                margin-right: 0.5em;
                
                &.note {
                    background-color: rgba($color: #ffffff, $alpha: 0.3);
                    color: #FFF;
                }
                &.error {
                    background-color: rgba($color: #FF5555, $alpha: 0.3);
                    color: #FFF;
                }
                &.warning {
                    background-color: rgba($color: #e87400, $alpha: 0.3);
                    color: #FFF;
                }
            }
            .gki_title {
                font-size: 1.1em;
                color: rgba($color: #FFF, $alpha: 0.6);
            }
        }
        
        .gki_item-body {
            margin: 0.4em 0 0 0;
            
            .gki_desc {
                margin: 0;
                color: rgba($color: #FFF, $alpha: 0.3);
            }
        }

    }    

}


// Animation
////////////

.gki_error-log {
    transition: max-height 1s;
}

.gki_error-log .gki_item {
    animation-name: log-item-appear;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.77,0,0.18,1);
    overflow: hidden;
}

@keyframes log-item-appear {
    from {
      max-height: 0;
    }
    
    to {
        max-height: 7rem; // Approximately standard size from 3 lines of content // NOTE: This would cause issues if content is longer than 3 lines
    }
}

.gki_drop-frame .gki_highlight {
    background-color: rgba(#FFF, 0);
    inset: 30px;
    border-radius: 100px;

    transition-property: inset, background-color, border-radius;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(.27,.87,.55,1);
}
.gki_drop-frame.gki_drag-over-active .gki_highlight {
    background-color: rgba(#FFF, 0.05);
    inset: 1px;
    border-radius: 10px;

    transition-property: inset, background-color, border-radius;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(.27,.87,.55,1);
}