@use 'sass:math';

/******************************* GRID VIEW */
.l-grid-view {
    display: flex;
    flex-flow: column nowrap;
    overflow: auto;
    height: 100%;

    &__item {
        flex: 0 0 auto;
        + .l-grid-view__item { margin-top: $interiorMargin; }
    }

    body.desktop & {
        flex-flow: row wrap;
        align-content: flex-start;

        &__item {
            height: $gridItemDesk;
            width: $gridItemDesk;
            margin: 0 $interiorMargin $interiorMargin 0;
        }
    }

    body.mobile & {
        flex: 1 0 auto;
    }

    [class*='l-overlay'] & {
        // When this view is in an overlay, prevent navigation
        pointer-events: none;
    }
}

/******************************* GRID ITEMS */
.c-grid-item {
    // Mobile-first
    @include button($bg: $colorItemBg, $fg: $colorItemFg);
    @include cControlHov();
    cursor: pointer;
    display: flex;
    padding: $interiorMarginLg;

    &__type-icon {
        filter: $colorKeyFilter;
        flex: 0 0 $gridItemMobile;
        font-size: floor(math.div($gridItemMobile, 2));
        margin-right: $interiorMarginLg;
    }

    &.is-alias {
        // Object is an alias to an original.
        [class*='__type-icon'] {
            @include isAlias();
        }
    }

    &.is-status--notebook-default {
        .is-status__indicator {
            display: block;

            &:before {
                color: $colorFilter;
                content: $glyph-icon-notebook-page;
                font-family: symbolsfont;
            }
        }
    }

    &.is-status--current {
        .is-status__indicator {
            display: block;

            &:before {
                color: $colorFilter;
                content: $glyph-icon-asterisk;
                font-family: symbolsfont;
            }
        }
    }

    &.is-status--draft {
        .is-status__indicator {
            display: block;

            &:before {
                color: $colorStatusAlert;
                content: $glyph-icon-draft;
                font-family: symbolsfont;
            }
        }
    }

    &[class*='is-status--missing'],
    &[class*='is-status--suspect']{
        [class*='__type-icon'],
        [class*='__details'] {
            opacity: $opacityMissing;
        }
    }

    &__details {
        display: flex;
        flex-flow: column nowrap;
        flex: 1 1 auto;
    }

    &__name {
        @include ellipsize();
        color: $colorItemFg;
        font-size: 1.2em;
        font-weight: 400;
        margin-bottom: $interiorMarginSm;
    }

    &__metadata {
        color: $colorItemFgDetails;
        font-size: 0.9em;

        body.mobile & {
            [class*='__item-count'] {
                &:before {
                    content: ' - ';
                }
            }
        }
    }

    &__controls {
        color: $colorItemFgDetails;
        flex: 0 0 64px;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        > * + * {
            margin-left: $interiorMargin;
        }
    }

    body.desktop & {
        $transOutMs: 300ms;
        flex-flow: column nowrap;

        &:hover {
            .c-grid-item__type-icon {
                transform: scale(1.1);
            }
        }

        > * {
            margin: 0; // Reset from mobile
        }

        &__controls {
            align-items: baseline;
            flex: 0 0 auto;
            order: 1;
            .c-info-button,
            .c-pointer-icon { display: none; }
        }

        &__type-icon {
            flex: 1 1 auto;
            font-size: floor(math.div($gridItemDesk, 3));
            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
            order: 2;
        }

        &__details {
            flex: 0 0 auto;
            justify-content: flex-end;
            order: 3;
        }

        &__metadata {
            display: flex;

            &__type {
                flex: 1 1 auto;
                @include ellipsize();
            }

            &__item-count {
                opacity: 0.7;
                flex: 0 0 auto;
            }
        }
    }
}