// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
@mixin snapshots() {
    .sanddance-snapshots {
        .ms-Button {
            margin-bottom: 0.5em;
        }
        .snapshot {
            border: 1px solid rgba(0, 0, 0, 0.2);
            cursor: pointer;
            margin-bottom: 0.5em;
            padding: 5px;
            &.selected {
                border-color: rgba(0, 0, 0, 0.6);
                border-width: 2px;
                padding: 4px;
            }
            &:hover {
                background-color: rgba(0, 0, 0, 0.1);
            }
            &:first-child {
                margin-top: 0.5em;
            }
        }
        .title {
            font-weight: 500;
            word-break: break-word;
        }
        .description {
            font-weight: 100;
            word-break: break-word;
        }
        .thumbnail {
            display: grid;
            height: 160px;
            margin-top: 0.5em;
        }
        img {
            height: 100%;
            object-fit: contain;
            width: 100%;
        }
        .actions {
            display: grid;
            grid-auto-flow: column;
            a, span {
                align-self: center;
                text-align: center;
            }
            button {
                width: 100%;
            }
        }
    }
    .sanddance-snapshot-dialog {
        .thumbnail {
            border: 1px solid rgba(0, 0, 0, 0.2);
            display: grid;
            height: 300px;
            margin-top: 1em;
        }
        img {
            height: 100%;
            object-fit: contain;
            width: 100%;
        }
    }
    .dark-theme {
        .sanddance-snapshots {
            .snapshot {
                background-color: rgba(0, 0, 0, 0.6);
                border-color: rgba(255, 255, 255, 0.2);
                &.selected {
                    border-color: rgba(255, 255, 255, 0.6);
                }
                &:hover {
                    background-color: rgba(0, 0, 0, 1);
                }
            }
            .actions a {
                color: #fff;
            }
        }
        &.sanddance-snapshot-dialog {
            .thumbnail {
                border-color: rgba(255, 255, 255, 0.2);
            }
        }
    }
}