// Variable disponible en angular-material: angular-material/angular-material.scss

$layout-breakpoint-md:     1280px !default;
$layout-breakpoint-sm:     960px !default;

$shadow-key-umbra-opacity:      0.2 !default;
$shadow-key-penumbra-opacity:   0.14 !default;
$shadow-ambient-shadow-opacity: 0.12 !default;

$layout-breakpoint-xs:     600px !default;
$layout-breakpoint-sm:     960px !default;
$layout-breakpoint-md:     1280px !default;
$layout-breakpoint-lg:     1920px !default;

$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;

@keyframes greenShow {
    0% { background: white; }
    1% { background: #c5dea7; opacity: 1; }
    100% { background: #c5dea7; opacity: 1; }
}

@keyframes fadeOut {
    from { opacity:1; }
    to { opacity:0; }
}

@import "../../shared/nekumo/variables";

@import "sidenavs/details/details-sidenav";
@import "sidenavs/main/main-sidenav";
@import "views/grid/grid-view.scss";
@import "views/list/list-view.scss";

#file-manager {



    .loading {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 320px;  // TODO: right sidebar width

        md-progress-circular {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .center {

        .header {
            position: relative;

            .header-content {
                height: 100%;

                .breadcrumb {
                    font-size: 24px;
                    padding-left: 90px;

                    span {
                        cursor: pointer;

                        md-icon {
                            cursor: default;
                        }

                        &:last-child {

                            md-icon {
                                display: none;
                            }
                        }
                    }

                    span.is-last {
                        cursor: default;
                    }

                    .separator {
                        margin-left: 8px;
                        margin-right: 8px;
                    }
                }
            }

            .add-file-button {
                position: absolute;
                bottom: -32px;
                left: 16px;
            }
        }

        .content {
            padding: 0;
            background: #FFFFFF;
        }
    }

    .icon-folder {
        &:before {
            color: $folder-color;
        }
    }
    .icon-document {
        &:before {
            color: $document-color;
        }
    }
    .icon-code {
        &:before {
            color: $code-color;
        }
    }
    .icon-spreadsheet {
        &:before {
            color: $spreadsheet-color;
        }
    }
    .icon-image {
        &:before {
            color: $image-color;
        }
    }
    .icon-video {
        &:before {
            color: $video-icolor;
        }
    }
    .icon-pdf {
        &:before {
            color: $pdf-icolor;
        }
    }
    .icon-audio {
        &:before {
            color: $audio-color;
        }
    }
    .icon-compressed {
        &:before {
            color: $compressed-color;
        }
    }
    .icon-unknown {
        &:before {
            color: $unknown-color;
        }
    }


    .icon-entries {
        &:before {
            color: #002b36;
        }
    }

    #directory-empty {
        margin-top: 60px;

        md-card {
            .md-card-image {
                position: relative;
                background: #FF5722;
                height: 120px;

                .mdi {
                    position: absolute;
                    color: #fbfbfb;
                    font-size: 180px;
                    height: 120px;
                    width: 200px;
                    top: 0;
                    right: 0;
                    overflow: hidden;
                }

                .mdi::before {
                    transform: translate(0, 70px);
                }
            }
        }
    }
}

// RESPONSIVE
@media screen and (max-width: $layout-breakpoint-md) {

    #file-manager {

        .center {

            .header {

                .header-content {

                    .breadcrumb {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: $layout-breakpoint-sm) {

    #file-manager {

        .center {

            .header {

                .header-content {

                    .breadcrumb {
                        font-size: 16px;
                    }
                }
            }
        }
    }
}