@import "~@dnnsoftware/dnn-react-common/styles/index";
.theme-file-skin, .theme-file-container{
    float: left;
    margin-left: 10px;
    img{
        width: 80px;
        height: 80px;
    }

    span.thumbnail{
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 9px 0;
        position: relative;
        vertical-align: top;

        &.empty{
            &:before{
                content: "";
                display: block;
                width: 80px;
                height: 80px;
                background-color: @mercury;
            }
        }

        svg{
            fill: @alto;
            width: 32px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        & > span.status{
            position: absolute;
            bottom: 5px;

            span{
                display: none;
                width: 16px;
                height: 16px;
                float: left;
                color: @white;
                position: relative;

                svg{
                    width: 20px;
                    fill: @white;
                }
            }

            span.status-site{
                background-color: @curiousBlue;
            }
            span.status-edit{
                background-color: @nonPhotoBlue;
            }
        }

        span.actions{
            position: absolute;
            display: block;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(30, 136, 195, 0.6);
            padding: 15px 10px;
            transition: opacity 100ms linear;

            a{
                color: @white;
                font-family: inherit;
                font-size: 11px;
                line-height: 12px;
                text-decoration: none;
                height: 50%;
                display: block;
                font-weight: 600;
            }
            a.set-edit.split{
                border-top: 1px solid @white;
                padding: 5px 0;
            }
        }

        &:hover span.actions{
            opacity: 1;
        }
    }

    div.title{
        display: block;
        text-align: center;
        font-family: inherit;
        font-weight: 600;
    }

    &:first-child{
        margin-left: 0;
    }

    &.selected{
        span.thumbnail{
            border: 4px solid @nonPhotoBlue;
            margin: 0;
            width: 98px;
            height: 98px;
            padding: 5px;
        }
    }

    &.selected.site{
        span.thumbnail{
            border-color: @curiousBlue;
        }
        .status, .status-site{
            display: block;
        }
    }
    &.selected.edit{
        .status, .status-edit{
            display: block;
        }
    }
}