@import "src/@fuse/scss/fuse";

example-viewer {
    display: block;
    padding: 24px 0;

    .example-viewer-wrapper {
        border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
        margin: 4px;
        h3 {
            margin-top: 10px;
        }
    }

    .example-viewer-header {
        align-content: center;
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 8px 20px;
        color: mat-color($foreground, secondary-text);
        background: rgba(mat-color($foreground, secondary-text), .03);
        flex: 1 1 auto;

        .example-viewer-title {
            flex: 1 1 auto;
        }
    }

    .example-viewer-source {

        .tab-content {
            background: #263238;

            .tab {
                position: relative;

                .example-source-copy {
                    position: absolute;
                    top: 8px;
                    display: none;
                    right: 8px;

                    mat-icon {
                        color: rgba(255, 255, 255, 0.87);
                    }
                }

                &:hover {
                    .example-source-copy {
                        display: inline-block;
                    }
                }

                .example-source {
                    display: flex;
                    padding: 0;
                    margin: 0;
                    min-height: 150px;
                    border-bottom: 1px solid mat-color($foreground, divider);

                    > pre {
                        width: 100%;
                    }
                }
            }
        }

    }

    .example-viewer-body {
        padding: 24px;
    }
}