import { colors, radius, responsiveMedia, shadows, spaces } from '@/styles/variables';
import styled, { css } from 'styled-components';

import { ISlider } from './Slider.interface';

export const StyledSlider = styled.div<ISlider>`
  position:relative;

  //vendor styles
  .blaze-slider {
    /* default config */
    --slides-to-show: 1;
    --slide-gap: 1rem;
    /* force ltr - slider does not work in rtl mode */
    direction: ltr;
  }

  .blaze-container {
    position: relative;
  }

  .blaze-track-container {
    overflow: hidden;
  }

  .blaze-track {
    will-change: transform;
    touch-action: pan-y;
    display: flex;
    gap: var(--slide-gap);

    --slide-width: calc(
      (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
        var(--slides-to-show)
    );
  }

  .blaze-track,
  .blaze-track > div {
    box-sizing: border-box;
  }

  .blaze-track > div {
    position: relative;
    width: var(--slide-width);
    flex-shrink: 0;
  }


  /* Custom styles */
  .blaze-slider{
    position:relative;

    &.dragging .blaze-track{
      cursor:grabbing;
    }

    .blaze-controls{
      /* position:absolute; */
      top: auto;
      /* bottom: 1.2rem; */
      left: 0;

      display:flex;
      align-items:center;
      justify-content: space-between;
      gap:16px;
      width: 100%;
    }

      /* pagination buttons */
    .blaze-pagination{
      display:flex;
      justify-content: center;
      align-items:center;
      width:100%;
      gap:10px;

      button{
        width:12px;
        height:12px;
        background:${colors.gray30};
        border-radius:50%;
        font-size: 0;
        padding:0;
        transition:all 0.3s ease;

        outline:none;
        border:none;
        cursor:pointer;

        &.hover{
          opacity: 0.6;
          background:${colors.gray50};
        }
        &.active{
          background:${colors.gray50};
        }
      }
    }

    /* arrows */
    .blaze-arrows{
      /* position:absolute;
      top: 350%;
      right: 0;
      transform: translateY(-50%); */
      width: 100%;
      display: flex;
      align-items:center;
      justify-content:space-between;

    }
    .blaze-next,
    .blaze-prev{
      cursor:pointer;

      i{
        margin:auto;
      }
    }

    &.start .blaze-prev,
    &.end .blaze-next{
      opacity: 0.5;
      cursor:not-allowed;
    }

    ${({ $responsiveCSS }) => $responsiveCSS && `
      ${$responsiveCSS};
    `}
  }
`;