@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;
      }
    }
  }
}