@import '../../../sass/colors';

li.item {
    text-decoration: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    background-color: rgba($color-slate-100, 0.3);
    transition: background-color 0.2s ease-in;
    backdrop-filter: blur(18px);
    padding: 0.5rem;
    margin: 0;

    &:hover {
        background-color: rgba($color-slate-200, 0.3);
    }

    .icon {
        height: 100%;
        grid-row: 1 / span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon > svg {
        width: 2rem;
        height: 2rem;
        margin: 0.5rem;
    }

    .fileName {
        font-weight: bold;
        grid-column: 2;
        grid-row: 1;
    }

    .meta {
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        grid-column: 2;
        grid-row: 2;
        span {
            color: $color-slate-600;
        }
    }
}