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


$shadow-key-umbra-opacity:      0.2 !default;
$shadow-key-umbra-opacity:      0.2 !default;
$shadow-key-penumbra-opacity:   0.14 !default;
$shadow-ambient-shadow-opacity: 0.12 !default;
$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;


@mixin not-selectable($value:none) {
  -webkit-touch-callout: $value;
  -webkit-user-select: $value;
  -khtml-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}


#media-tabs {
    md-tabs-wrapper {
        background: #FFFFFF;
        box-shadow: $whiteframe-shadow-1dp;
        // padding: 0 24px;

        md-tabs-canvas {
            // height: 56px;

            md-pagination-wrapper {
                // height: 56px;
            }

            .md-tab {
                // padding: 16px 24px;
                text-transform: none;
            }
        }
    }

    &:not(.md-dynamic-height) {

        md-tabs-content-wrapper {
            top: 56px;
        }
    }

    md-tabs-content-wrapper {

        md-tab-content {
            padding: 24px;
        }
    }

    .grid {
        justify-content: center;
    }
}

#media {
    .center {

        .header {
            position: relative;

            .header-content {
                height: 100%;

                .breadcrumb {
                    font-size: 24px;
                    padding-left: 90px;
                    position: absolute;
                    bottom: 20px;

                    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;
                    }
                }
            }
        }
    }

    .media-entry {
        @include not-selectable();

        cursor: pointer;

        display: block;
        background-position: center;
        background-size: cover;

        &.background-folder {
            background-color: $folder-color;
            overflow: hidden;

            h3 {
                display: inline-block;
                width: 100%;
                max-height: 100%;
                font-size: 14px;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;

                -webkit-line-clamp: 2; /* number of lines to show */

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


        //.preview {
        //    display: block;
        //    background-position: center;
        //    background-size: cover;
        //}

        //.title {
        //    position: absolute;
        //    bottom: 0;
        //    left: 0;
        //    right: 0;
        //    z-index: 10;
        //    padding: 0 16px;
        //    height: 48px;
        //    line-height: 48px;
        //    background: rgba(0, 0, 0, 0.54);
        //    color: #fff;
        //    font-size: 15px;
        //    overflow: hidden;
        //    text-overflow: ellipsis;
        //}
    }

    md-nav-bar {
        &.center {
            nav {
                display: flex;
                align-items: center;
                justify-content: center
            }
        }
    }
}


#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);
            }
        }
    }
}

