@use "@material/animation/_index" as animation;
@use "@material/elevation/_index" as elevation;
@use "@material/icon-button/_index" as icon-button;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;
@use "@material/typography/_index" as typography;

.outer-container .mdc-image-list__item {
  cursor: pointer;
  margin: 2px;
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states(black);
  width: calc((100% * 1 / 6) - 4px);
  .container {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;
      transition: animation.standard(opacity, 150ms);
    }
    .link-icon {
      animation: animation.standard(fade-out, 150ms) forwards;
      @include icon-button.ink-color(white);
      &-container {
        position: absolute;
        width: 100%;
        height: 64px;
        z-index: 3;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 8px;
        &::before {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          right: 0;
          top: 0;
          content: "";
          background: linear-gradient(rgba(black, 0.5), transparent);
          opacity: 0;
          transition: animation.standard(opacity, 250ms);
        }
      }
    }
    .media-container {
      display: flex;
      flex-direction: column;
      position: relative;
      transition: animation.standard(filter, 150ms);
      animation: placeholder 2s ease infinite;
      .mdc-image-list__image {
        animation: animation.standard(fade-in, 500ms) forwards;
      }
      .time-indicator {
        position: absolute;
        bottom: 64px + 8px;
        @include rtl.reflexive-position(left, 8px);
        display: flex;
        align-items: center;
        margin: 0;
        height: 24px;
        padding: 0 12px;
        @include shape.radius(12px);
        z-index: 3;
        background-color: #333333;
        color: white;
      }
    }
  }
  .mdc-image-list__supporting {
    height: 64px;
    z-index: 1;
    transition: animation.standard(background-color, 150ms);
    .mdc-image-list__label {
      display: flex;
      align-items: center;
      width: 100%;
      .text-container {
        flex: auto 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .primary-text {
          display: flex;
          justify-content: stretch;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          transition: animation.standard(color, 150ms);
          div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .twemoji {
              height: 1.0625rem;
              @include rtl.reflexive-box(margin, left, 0.35rem);
              margin-bottom: -0.15rem;
            }
          }
        }
        .secondary-text {
          @include typography.typography(body2);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(white, 0.6);
          transition: animation.standard(color, 150ms);
        }
      }
      .live-indicator,
      .ship-indicator {
        height: 24px;
        flex-shrink: 0;
        @include rtl.reflexive-box(margin, left, 8px);
        fill: white;
        transition: animation.standard(fill, 150ms);
      }
    }
  }
  &.selected {
    .container::before {
      opacity: 0.24;
    }
    .media-container {
      filter: grayscale(100%);
    }
  }

  @media (min-width: 1240px) {
    &:hover .container {
      .link-icon {
        animation: animation.standard(fade-in-scale, 150ms) forwards;
        &-container::before {
          opacity: 1;
        }
      }
    }
  }

  @media (min-width: 940px) and (max-width: 1399px) {
    width: calc((100% * 1 / 4) - 4px);
  }

  @media (min-width: 600px) and (max-width: 939px) {
    width: calc((100% * 1 / 3) - 4px);
  }

  @media (max-width: 599px) {
    width: calc((100% * 1 / 2) - 4px);
  }

  // side sheet open

  @media (min-width: 1240px) and (max-width: 1499px) {
    .drawer-open & {
      width: calc((100% * 1 / 4) - 4px);
    }
  }

  // nav drawer open

  @media (min-width: 1240px) and (max-width: 1599px) {
    .nav.mdc-drawer--open + .mdc-drawer-app-content & {
      width: calc((100% * 1 / 3) - 4px);
    }
    .nav.mdc-drawer--open + .mdc-drawer-app-content.drawer-open & {
      width: calc((100% * 1 / 2) - 4px);
    }
  }
}
