@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

.#{molecule('rolling-formats')} {
  display: inline-block;

  &-space {

    @media (min-width: 768px) {
      display: inline-block;
      width: 10px;
    }
  }

  &-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  &-item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    margin-right: auto;
    animation: roll 8s cubic-bezier(0.25, 0.1, 0.25, 1) -1s infinite backwards;

    @media (min-width: 768px) {
      margin-left: auto;
    }

    @media (min-width: 1024px) {
      margin-left: 0;
    }

    &:nth-child(2) { animation-delay: 1s; opacity: 0; }
    &:nth-child(3) { animation-delay: 3s; opacity: 0; }
    &:nth-child(4) { animation-delay: 5s; opacity: 0; }
  }
}

@keyframes roll {
  0% { opacity: 0; transform: translate3d(0, -70%, 0); }
  2.5%, 25% { opacity: 1; transform: translate3d(0, 0, 0); }
  27.5%, 100% { opacity: 0; transform: translate3d(0, 70%, 0); }
}
