@use "@material/animation/_index" as animation;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;
@use "@material/theme/_index" as theme;

.list .mdc-list .mdc-list-item {
  &__primary-text {
    div {
      display: inline;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .twemoji {
        height: 1.0625rem;
        @include rtl.reflexive-box(margin, left, 0.15rem);
        margin-bottom: -0.15rem;
      }
    }
  }

  @media (min-width: 1240px) {
    &:hover {
      .live-indicator,
      .ship-indicator {
        animation: animation.standard(fade-out, 150ms) forwards;
      }
      .share-icon .mdc-icon-button {
        animation: animation.standard(fade-in-scale, 150ms) forwards;
      }
    }
  }

  .time-indicator {
    display: inline-flex;
    align-items: center;
    margin: 0;
    height: 24px;
    padding: 0 12px;
    @include shape.radius(12px);
    flex-grow: 0;
    flex-shrink: 0;
    @include rtl.reflexive-box(margin, left, auto);
    & + .live-indicator,
    & + .ship-indicator {
      @include rtl.reflexive-box(margin, left, 16px);
    }
  }
  .live-indicator,
  .ship-indicator {
    overflow: hidden;
    height: 24px;
    flex-shrink: 0;
    animation: animation.standard(fade-in-scale, 150ms) forwards;
  }
  .share-icon {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    @include rtl.reflexive-position(right, 0);
    padding: 0 6px;
    .mdc-icon-button {
      animation: animation.standard(fade-out, 150ms) forwards;
    }
  }
}

.list-image {
  &-container {
    height: 56px;
    width: 100px;
    @include rtl.reflexive-box(margin, right, 16px);
    flex-shrink: 0;
    animation: placeholder 2s ease infinite;
    overflow: hidden;
  }
  animation: animation.standard(fade-in, 500ms) forwards;
  height: 56px;
  width: 100px;
  background-size: cover;
  background-position: center;
}
