:host {
  display: inline-block;
}

#frames,
.x-gif__frames {
  display: inline-block;
  position: relative;

  @for $i from 0 to 100 {
    &[data-frame="#{$i}"] {
      .frame:nth-child(n + #{2 + $i}) {
        opacity: 0;
      }
      .frame.disposal-restore:nth-child(#{1 + $i}) {
        opacity: 1;
      }
    }
  }
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);

  &:first-child {
    position: static;
  }
  &.disposal-restore {
    opacity: 0;
  }

  :host([exploded]) & {
    position: static;
    opacity: 1;
  }
}

x-gif {
//  display: none;
}

// Full Screen overrides
@mixin fill-overrides {
  width: 100%;
  height: 100%;

  .frames-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  #frames,
  .x-gif__frames {
    transform-origin: 50% 50%;
  }
}

:host([fill]) {
  @include fill-overrides;
}

x-gif[fill] {
  @include fill-overrides;
}