/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../variables/forms_vars";
@import "../variables/file_uploaders_vars";
@import "../variables/buttons_vars"; // Used for styling the File uploader button sizings
@import "../mixins";

.dlt-browse-upload-item {
    width: $file-uploaders-width;
    position: relative;

    .dlt-form-requirement {
        padding: 0;
    }
}

.dlt-file-upload-label { // Legend for the control
    font-weight: $forms-legend-font-weight;
    font-size: $forms-legend-font-size;
    color: $forms-color-text;
    display: inline-block;
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    line-height: 1rem;
    margin-bottom: 0.5rem;
}

.sm-file-input {
    .dlt-file-upload-label {
        font-size: $forms-legend-font-size-sm;
    }

    .dlt-button {
        line-height: $buttons-line-height-sm;
        font-size: $buttons-font-size-sm;
        padding: $buttons-padding-y $buttons-padding-x-sm;
    }

    .dlt-file-input{
        width: 93px;
        height: 34px;
        left: -5px;
        top: 19px;
    }
}

.lg-file-input {
    .dlt-button {
        line-height: $buttons-line-height-lg;
        padding: $buttons-padding-y $buttons-padding-x-lg;
    }

    .dlt-file-input{
        width: 120px;
        height: 51px;
        left: -5px;
        top: 19px;
    }
}

.dlt-file-description {
    font-weight: $file-uploaders-font-weight;
    font-size: $file-uploaders-font-size-sm;
    color: $forms-color-text;
    margin: $file-uploaders-margin;
    line-height: $file-uploaders-line-height;
}

.dlt-file-input {
    position: absolute;
    opacity: 0;

    width: 113px;
    height: 42px;
    left: -5px;
    top: 19px;
    

    &:focus:not(:disabled)+label,
    &:hover:not(:disabled)+label {
        border: $forms-border-width $forms-border-style $forms-color-primary;
        outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
        outline-offset: $forms-outline-offset;
        cursor: pointer;
    }

    &:active:not(:disabled)+label {
        color: $forms-color-primary !important;
        background-color: $forms-color-primary-light !important;
        border-color: $forms-color-primary !important;
    }
}

.dlt-file-container {
    display: block;
    width: 100%;
    height: auto;
    background: $forms-color-background;
    border-radius: $forms-border-radii;
    padding-bottom: 4px;
    margin: $file-uploaders-margin;
    
    @include box-shadow($file-uploaders-box-shadow);

    .files-head {
        display: flex;
        justify-content: space-between;

        .files-length {
            display: block;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 4px 0;
            height: $file-uploaders-line-height-md;
            line-height: $file-uploaders-line-height-md;
            background-color: $forms-color-background;
            padding: $file-uploaders-padding;
            position: relative;
            font-weight: $file-uploaders-count-font-weight;
            font-size: $file-uploaders-font-size;
        }

        .dlt-remove-all {
            cursor: pointer;
            text-decoration: none;
            border: none;
            font-size: $file-uploaders-clear-button-font-size;
            color: $forms-color-primary;
            background-color: $forms-color-background;
            font-weight: $file-uploaders-clear-button-font-weight;
            padding: $file-uploaders-clear-button-padding;
            line-height: $file-uploaders-clear-button-line-height;
            height: $file-uploaders-clear-button-height;
            border: $forms-border-width-hover $forms-border-style-hover $white;
            margin: $file-uploaders-clear-button-margin;
            outline: none;

            .remove-all-icon {
                font-size: $file-uploaders-clear-button-icon-font-size;
                float: left;
                margin: $file-uploaders-clear-button-icon-margin;
            }

            &:hover,
            &:focus {
                border: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
                outline: none;
            }

            &:active {
                background-color: $forms-color-primary-light;
                color: $forms-color-primary;
                border: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
            }
        }
    }

    .dlt-file-list {
        max-height: 11rem;
        overflow: auto;

        .mCSB_inside>.mCSB_container {
            margin-right: 0;
        }

        .mCSB_scrollTools {
            width: 0.5rem;
            background: $white;
            border-radius: $forms-border-radii;
            background: $file-uploaders-color-scrollbar-track;
        }

        .mCSB_draggerContainer {
            right: -2px !important;
        }

        .mCSB_dragger_bar {
            border-radius: $forms-border-radii !important;;
            background-color: $file-uploaders-color-scrollbar-thumb!important;
        }

        .mCSB_draggerRail {
            opacity: 0;
            border-radius: $forms-border-radii;
        }

        .dlt-selected-file {
            display: block;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 8px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 2rem;
            background-color: $forms-color-background;
            margin-left: 0.25rem;
            position: relative;
            border: $forms-border-width $forms-border-style $white;

            .dlt-filename {
                overflow-x: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 92%;
                display: inline-flex;
                align-items: center;
                margin: 0;
                direction: ltr;
                justify-content: flex-start;
                font-weight: $file-uploaders-font-weight;
                font-size: $file-uploaders-font-size;
                color: $forms-color-text;
                line-height: $file-uploaders-line-height-md;
                padding-left: 0.5rem;
            }

            &:focus-within {
                // border: $input-text-border-width $input-text-border-style $gray-50;
                border: $forms-border-width $forms-border-style $forms-color-input-border;
                @include box-shadow(inset 0px 0px 0px 1px $forms-color-primary);
                outline: none;
            }

            &:hover {
                background-color: $forms-color-background;
                color: $forms-color-text;
                border: $forms-border-width $forms-border-style $forms-color-primary;
                @include box-shadow(inset 0px 0px 0px 1px $forms-color-primary);
                outline: none;
            }

            .remove-icon {
                cursor: pointer;
                position: absolute;
                right: $file-uploaders-remove-icon-margin-right;
                text-decoration: none;
                border: none;
                font-size: $file-uploaders-remove-icon-font-size;
                color: $forms-color-primary;
                background-color: $forms-color-background;
                padding: 0;
                margin: 0;
                width: $file-uploaders-remove-icon-size;
                height: $file-uploaders-remove-icon-size;
                line-height: 0;
                text-align: center;

                &:hover {
                    outline: none;
                    color: var(--dlt-color-icon-interactive-primary-highlighted, rgb(15,76,123));
                }

                &:focus {
                    outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
                    outline-offset: $forms-outline-offset;
                }

                &:active {
                    background-color: $forms-color-primary-light;
                    color: $forms-color-primary;
                    outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
                    outline-offset: $forms-outline-offset;
                }
            }
        }
    }
}

// File upload - Drag & Drop -- Start --

.dlt-drag-drop-item {
    width: $file-uploaders-drag-drop-width;

    p {
        font-size: $file-uploaders-font-size;
        margin: $file-uploaders-drag-drop-p-margin;
        line-height: $file-uploaders-drag-drop-p-line-height;
    }

    .drop-zone {
        width: 100%;
        min-height: 168px;
        border: $forms-border-width $file-uploaders-drop-zone-border-style $forms-color-input-border;
        border-radius: $forms-border-radii;
        text-align: center;
        position: relative;
        // top: 4px;
        background: $forms-color-background;
        padding: $file-uploaders-drop-zone-padding;
        // padding: 1rem 0 0.125rem 0;
    }

    .dlt-file-input{
        height: 168px;
        width: inherit;
        top: 0!important;
        left: 0!important;
    }

    .drop-zone.mouse-over {
        border: $forms-border-width-hover $file-uploaders-drop-zone-border-style-hover $forms-color-primary;
    }

    .dlt-file-container{
        margin-top: 40px;
    }
}

.sm-drag-drop {

    .dlt-button {
        line-height: $buttons-line-height-sm;
        font-size: $buttons-font-size-sm;
        padding: $buttons-padding-y $buttons-padding-x-sm;
    }

    p {
        // font-size: $file-uploaders-font-size-sm;
        margin: $file-uploaders-drag-drop-p-margin-sm;
        display: inline;
    }

    .drop-zone {
        min-height: 56px;
        padding: $file-uploaders-drop-zone-padding-sm;
    }

    .dlt-file-input{
        height: 56px;
        width: inherit;
        top: 0!important;
        left: 0!important;
    }

    .drop-zone > p:first-child{
        margin-right:0;

        &::after{
            content: ",";
        }
    }

    .dlt-file-container{
        margin-top: 12px;
    }
    
}

.lg-drag-drop {
    p {
        margin: $file-uploaders-drag-drop-p-margin-lg;
        line-height: $file-uploaders-drag-drop-p-line-height;
    }

    .dlt-button {
        line-height: $buttons-line-height-lg;
        padding: $buttons-padding-y $buttons-padding-x-lg;
    }

    .drop-zone {
        min-height: 184px;
        padding: $file-uploaders-drop-zone-padding-lg;
    }

    .dlt-file-input{
        height: 184px;
        width: inherit;
        top: 0!important;
        left: 0!important;
    }
}