/**
 * Marked Extended Slide - Structural Styles
 * Minimal CSS required for slide functionality
 *
 * Import this file if you want the basic slide structure:
 * @import '@fsegurai/marked-extended-slide/styles/slide.css';
 */

/* Presentation Container */
.marked-extended-slide-presentation {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Slides Container */
.marked-extended-slide-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Individual Slide */
.marked-extended-slide-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

.marked-extended-slide-slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}

.marked-extended-slide-slide.previous,
.marked-extended-slide-slide.prev {
  transform: translateX(-100%);
}

.marked-extended-slide-slide.next {
  transform: translateX(100%);
}

/* Slide Content */
.marked-extended-slide-slide-content {
  width: 90%;
  max-width: 1200px;
  padding: 2rem;
}

/* Layout: Center */
.marked-extended-slide-layout-center {
  text-align: center;
}

.marked-extended-slide-layout-center .marked-extended-slide-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Layout: Two Columns */
.marked-extended-slide-layout-two-cols .marked-extended-slide-slide-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Layout: Image Right */
.marked-extended-slide-layout-image-right .marked-extended-slide-slide-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.marked-extended-slide-layout-image-right .marked-extended-slide-slide-content > :first-child {
  flex: 1;
}

.marked-extended-slide-layout-image-right .marked-extended-slide-slide-content > img {
  order: 1;
  max-width: 50%;
  height: auto;
}

/* Layout: Image Left */
.marked-extended-slide-layout-image-left .marked-extended-slide-slide-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.marked-extended-slide-layout-image-left .marked-extended-slide-slide-content > :first-child {
  flex: 1;
}

.marked-extended-slide-layout-image-left .marked-extended-slide-slide-content > img {
  max-width: 50%;
  height: auto;
}

/* Layout: Full (no padding) */
.marked-extended-slide-layout-full .marked-extended-slide-slide-content {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Layout: Fact */
.marked-extended-slide-layout-fact {
  text-align: center;
}

.marked-extended-slide-layout-fact .marked-extended-slide-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Controls */
.marked-extended-slide-controls {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.marked-extended-slide-control {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marked-extended-slide-control svg {
  width: 24px;
  height: 24px;
}

/* Progress Bar */
.marked-extended-slide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10;
}

.marked-extended-slide-progress-bar {
  height: 100%;
  transition: width 0.3s ease;
}

/* Slide Numbers */
.marked-extended-slide-slide-number {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.875rem;
  z-index: 10;
}

/* Overview Mode */
.marked-extended-slide-presentation.overview .marked-extended-slide-slides-container,
.marked-extended-slide-presentation.overview-mode .marked-extended-slide-slides-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  overflow-y: auto;
}

.marked-extended-slide-presentation.overview .marked-extended-slide-slide,
.marked-extended-slide-presentation.overview-mode .marked-extended-slide-slide {
  position: relative;
  transform: scale(0.3);
  opacity: 1;
  cursor: pointer;
}

/* Aspect Ratios */
.marked-extended-slide-presentation[data-aspect-ratio="16:9"] .marked-extended-slide-slide {
  aspect-ratio: 16 / 9;
}

.marked-extended-slide-presentation[data-aspect-ratio="4:3"] .marked-extended-slide-slide {
  aspect-ratio: 4 / 3;
}

/* Transitions */
.marked-extended-slide-slide[data-transition="fade"] {
  transform: none;
}

.marked-extended-slide-slide[data-transition="fade"].previous {
  transform: none;
}

.marked-extended-slide-slide[data-transition="zoom"] {
  transform: scale(0);
}

.marked-extended-slide-slide[data-transition="zoom"].active {
  transform: scale(1);
}