/*
Component represents a slider (image gallery/content gallery).
Use:
  <div class="top-slider">
    <button class="top-slider-left"></button>
    <button class="top-slider-right"></button>

    <div class="top-slider-content">
      <div class="top-slider-page">
        <img class="top-image">
      </div>
      <div class="top-slider-page">
        <img class="top-image">
      </div>
      <div class="top-slider-page">
        <img class="top-image">
      </div>
    </div>
  </div>
*/

@use '../mixins/flex.scss';

.top-slider {
  width: 100%;
  position: relative;

  overflow: hidden;

  // Buttons
  .top-slider-left, .top-slider-right {
    position: absolute;
    top: 50%;
    bottom: 50%;

    width: 32px;
    height: 32px;

    cursor: pointer;

    background: 
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='22' viewBox='0 0 13 22' fill='none'%3E%3Cpath d='M12 1L2 11L12 21' stroke='%230D0621' stroke-width='2'/%3E%3C/svg%3E")
      var(--color-primary);
    background-repeat: no-repeat;
    background-position: center;
  }
  .top-slider-left {
    left: var(--unit-2);
  }
  .top-slider-right {
    transform: rotate(180deg);
    right: var(--unit-2);
  }

  // Content
  .top-slider-content {
    @include flex.row;
    @include flex.centering;

    .top-slider-page {
      margin-right: var(--unit-2);

      &:last-child {
        margin-right: 0;
      }
    }
  }
}