@import "theme://";

.DownloadsListing {

    .entries {
        list-style-type: none;
        margin: 0;
        padding: 0;

        @include grid(XXL) {
            @include flex-grid(5, 5px);
        }

        @include grid(XL) {
            @include flex-grid(4, 5px);
        }

        @include grid(L) {
            @include flex-grid(3, 5px);
        }

        @include grid(M) {
            @include flex-grid(2, 5px);
        }

        .entry {

            .link {
                text-decoration: none;
                padding: 1.5em;
                border-radius: 9px;
                display: flex;

                &:hover {
                    background-color: project-color();
                    background-image: linear-gradient(transparent, rgba(black, 0.05));
                    box-shadow: 0 0 16px rgba(black, 0.2);
                    color: white;

                    .icon svg {
                        fill: white;
                    }

                    .title {
                        color: inherit;
                    }

                    .file_info {
                        color: rgba(white, 0.8);
                    }
                }
            }

            .icon {
                margin-right: 0.8em;

                svg {
                    fill: #888;
                    height: 4em;
                    width: auto;
                }
            }

            .text {
                margin-top: 0.5em;
            }

            .title {
                @include link($hover: false);
                font-weight: 600;
                text-decoration: none;
            }

            .file_info {
                margin-top: 0.2em;
                font-size: 0.8em;
                color: #555;

                .size_details {
                    margin-left: 0.5em;
                    font-weight: 300;
                }
            }
        }
    }
}