@import "variables";

:host {
    display: flex;
    overflow: hidden;
}

.gallery {
    /* autoprefixer: off */
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-template-rows: repeat(auto-fill, 180px);
    grid-gap: 10px 20px;
    overflow-y: auto;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    .card:hover {
        box-shadow: 0 0.125rem 0 0 $color-brand;
        border: 1px solid $color-brand;
    }
}

.card {
    margin-top: 0;
}

.selected-checkbox {
    opacity: 0;
    position: absolute;
    color: $color-success;
    background-color: white;
    border-radius: 50%;
    top: -12px;
    left: -12px;
    box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.75);
    transition: opacity 0.1s;
}

.card.selected {
    box-shadow: 0 0.125rem 0 0 $color-brand;
    border: 1px solid $color-brand;

    .selected-checkbox {
        opacity: 1;
    }
}

.detail {
    font-size: 12px;
    margin: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info-bar {
    width: 25%;
    padding: 0 6px;
    overflow-y: auto;

    .card {
        z-index: 1;
    }

    .stack {
        z-index: 0;
        opacity: 0;
        transform: perspective(500px) translateZ(0px) translateY(-16px);
        height: 16px;
        transition: transform 0.3s, opacity 0s 0.3s;
        background-color: white;

        &.visible {
            opacity: 1;
            transform: perspective(500px) translateZ(-44px) translateY(0px);
            background-color: $color-grey-1;
            transition: transform 0.3s, color 0.3s;
        }
    }

    .selection-count {
        opacity: 0;
        text-align: center;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0s 0.3s;
        .trigger {
            cursor: pointer;
            color: $color-grey-4;
            text-decoration: underline;
        }
        &.visible {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s, visibility 0s;
        }
    }

    .placeholder {
        text-align: center;
        color: $color-grey-3;
    }

    .preview {
        img {
            max-width: 100%;
        }
    }
    .details {
        font-size: 12px;
        word-break: break-all;
    }
    .name {
        line-height: 14px;
        font-weight: bold;
    }
}
