:host {

  display: block;
  position: relative;
	overflow: hidden;
	user-select: none;

  --black: #000;
  --dark: #2D2D2C;
  --white: #fff;
  --blue: #0693e3;
}

:host([loading]) {

	pointer-events: none;
}

:host([loading]):before {

	background-color: var(--black);
}

:host(:not([loading])):after {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #000;
}

:host:before {

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: 1s ease all;
	z-index: 1;
	pointer-events: none;
}

svg {

  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  padding: 2rem;
  cursor: pointer;
  transition: 0.2s ease opacity;
  width: 1rem;
  max-width: clamp(1.185rem, 3vw, 2.25rem);
}

:host([loading]) svg {

  opacity: 0;
  pointer-events: none;
}

svg:last-of-type {

  left: auto;
  right: 0;
}

svg.hide {

  opacity: 0;
  pointer-events: none;
}

slot {

  display: none;
}

.wrapper {

  flex: 1;
}

.container {

	--n: 1;
	display: flex;
	align-items: stretch;
	width: 100%;
	width: calc(var(--n) * 100%);
  height: 100%;
	overflow: hidden;
  margin: 0;
  padding: 0;
	transform: translate(calc(var(--i, 0) / var(--n) * -100%));
	transform-style: preserve-3d;
}

.container figure {

  display: block;
	width: 100%;
	width: calc(100% / var(--n));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.container.anim {

	pointer-events: none;
	transition: transform 0.8s ease;
}

@media screen and (pointer: fine) {

  svg:hover {

    opacity: 0.5;
  }
}

/*@media screen and (orientation: portrait) {

  :host(.full) .wrapper {

    aspect-ratio: 1 / 1;
  }

}*/