@mixin xit-carousel($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);
    $option-color: mat-color($background, disabled-list-option);

    .xit-carousel {
        height: 100%;
        position: relative;
        width: 100%;

        & .carousel-loading-canvas {
            align-items: flex-end;
            display: flex;
            flex-direction: row;
            height: 100%;
            justify-content: flex-start;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;

            & .mat-progress-bar {
                height: 2px;
            }
        }

        & .xit-canvas {
            height: 100%;
            width: 100%;
        }

        & .carousel-toolbar {
            align-items: center;
            bottom: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: absolute;
            width: 100%;
            z-index: 1;

            & > div {
                align-items: flex-end;
                cursor: pointer;
                display: flex;
                height: 16px;
                justify-content: center;

                & > div {
                    background: linear-gradient(to top,$option-color 0%,transparent 100%);
                    height: 2px;
                    width: 100%;
                }

                &.active {
                    & > div {
                        background: $accent-color;
                    }
                }
            }
        }
    }
}


@mixin xit-carousel-theme($theme) {
    @include xit-carousel($theme);
}

@mixin xit-viewer($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);

    .xit-viewer-panel {
        .mat-dialog-container {
            background-color: rgba(0,0,0,.85);
            color: #fff;

            div[mat-dialog-content] {
                height: 100%;
                max-height: 100%;

                & .viewer-content {
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    height: 100%;
                    justify-content: center;
                    position: relative;

                    & .viewer-photo {
                        & .xit-canvas {
                            height: 100%;
                            width: 100%;
                        }

                        & .viewer-photo-menu {
                            align-items: center;
                            background: linear-gradient(to bottom,rgba(0,0,0,0.65) 0%,transparent 100%);
                            display: flex;
                            flex-direction: row;
                            height: 56px;
                            justify-content: space-between;
                            left: 0;
                            opacity: 0;
                            position: fixed;
                            top: 0;
                            -webkit-transition: all 1.8s;
                            -moz-transition: all 1.8s;
                            -o-transition: all 1.8s;
                            transition: all 1.8s;
                            width: 100%;

                            @media (min-width: 576px) {
                                height: 64px;
                            }

                            & > div:first-child {
                                margin-left: 16px;

                                & .viewer-photo-title {
                                    cursor: pointer;
                                    margin-left: 8px;

                                    & > span:first-child {
                                        color: $accent-color;
                                        margin-right: 8px;
                                    }
                                }
                            }

                            & > div:last-child {
                                margin-right: 16px;
                            }

                            & > div {
                                align-items: center;
                                display: flex;
                                flex-direction: row;
                                justify-content: flex-start;
                            }
                        }
                    }
                }
            }
        }
    }
}


@mixin xit-viewer-theme($theme) {
    @include xit-viewer($theme);
}


@mixin xit-utility-theme($theme) {
    @include xit-carousel-theme($theme);
    @include xit-viewer-theme($theme);
}