div.deckgo-gif {
  position: relative;
  border-radius: var(--border-radius);

  img {
    width: var(--width);
    height: var(--height);
  }

  ::slotted([slot="top"]),
  ::slotted([slot="bottom"]) {
    position: absolute;

    left: 50%;
    transform: translate(-50%, 0);

    text-align: center;

    background: var(--background);
    color: var(--color);
    padding: var(--padding, 8px);
  }

  ::slotted([slot="top"]) {
    top: 0;
  }

  ::slotted([slot="bottom"]) {
    bottom: 0;
  }
}

:host(.deckgo-gif-fullscreen) {
  div.deckgo-gif {
    width: var(--slide-width);
    height: var(--slide-gif-height, 100vh);

    --width: var(--slide-width);

    overflow: hidden;

    img {
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
    }

    ::slotted([slot="top"]),
    ::slotted([slot="bottom"]) {
      z-index: var(--zIndex, 2);
    }
  }
}

:host(.deckgo-gif-hidden) {
  ::slotted([slot="top"]),
  ::slotted([slot="bottom"]) {
    display: none;
  }
}
