/**
 * Marked Extended Slide - Structural Styles (SCSS)
 * Minimal SCSS required for slide functionality with customizable variables
 *
 * Import this file if you want the basic slide structure:
 * @import '@fsegurai/marked-extended-slide/styles/slide.scss';
 */

// Customizable variables
$slide-transition-duration: 0.6s !default;
$slide-content-max-width: 1200px !default;
$slide-content-padding: 2rem !default;
$control-size: 40px !default;
$progress-height: 3px !default;

// 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 $slide-transition-duration ease,
              opacity $slide-transition-duration ease;

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

  &.previous {
    transform: translateX(-100%);
  }

  &.prev {
    transform: translateX(-100%);
  }

  &.next {
    transform: translateX(100%);
  }
}

// Slide Content
.marked-extended-slide-slide-content {
  width: 90%;
  max-width: $slide-content-max-width;
  padding: $slide-content-padding;
}

// Layout: Center
.marked-extended-slide-layout-center {
  text-align: 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;

    > :first-child {
      flex: 1;
    }

    > 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;

    > :first-child {
      flex: 1;
    }

    > 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-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: $control-size;
  height: $control-size;
  padding: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 24px;
    height: 24px;
  }
}

// Progress Bar
.marked-extended-slide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: $progress-height;
  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 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    overflow-y: auto;
  }

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

.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-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;

  &.previous {
    transform: none;
  }
}

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

  &.active {
    transform: scale(1);
  }
}