/* =========================================================
PROTEXAA SLIDER
========================================================= */

.protexaa-slider {
position: relative;


width: calc(100% - 20px);

margin: 10px;

overflow: hidden;

background: transparent;

direction: ltr;

user-select: none;
-webkit-user-select: none;


}

/* =========================================================
HEADER
========================================================= */

.protexaa-slider__header {


width: 100%;

min-height: 36px;

margin-bottom: 10px;

display: flex;

align-items: center;

justify-content: flex-start;

direction: rtl;

padding-right: 10px;

box-sizing: border-box;


}

/*
خط کوتاه ابتدای بخش عنوان
*/

.protexaa-slider__header-line-short {


display: block;

width: 10px;

height: 3px;

margin-left: 14px;

background: #e00000;

border-radius: 999px;

flex: 0 0 10px;


}

/*
عنوان
*/

.protexaa-slider__title {


margin: 0;

padding: 0;

font-size: 24px !important;

font-weight: 700;

line-height: 1.4;

white-space: nowrap;

color: #111;

direction: rtl;


}

/*
فاصله بین عنوان و خط 100 پیکسلی
*/

.protexaa-slider__header-line {


display: block;

width: 100px;

height: 3px;

margin-right: 14px;

background: #e00000;

border-radius: 999px;

flex: 0 0 100px;


}

/* =========================================================
VIEWPORT
========================================================= */

.protexaa-slider__viewport {


width: 100%;

height: 33.333vh;

min-height: 180px;

max-height: 450px;

overflow: hidden;

background: transparent;

cursor: grab;

touch-action: pan-y;

position: relative;


}

.protexaa-slider__viewport.is-dragging {


cursor: grabbing;


}

/* =========================================================
TRACK
========================================================= */

.protexaa-slider__track {


display: flex;

align-items: stretch;

width: max-content;

height: 100%;

gap: 4px;

will-change: transform;

transition:
    transform 0.7s cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
    );


}

/* =========================================================
SLIDE
========================================================= */

.protexaa-slider__item {


position: relative;

flex: 0 0 auto;

height: 100%;

width: auto;

display: flex;

align-items: center;

justify-content: center;

text-decoration: none;

overflow: hidden;

background: transparent;

margin: 0;

padding: 0;


}

/*
تصویر با اندازه طبیعی خودش
*/

.protexaa-slider__image {


display: flex;

align-items: center;

justify-content: center;

height: 100%;

width: auto;

overflow: hidden;

background: #fff;


}

.protexaa-slider__image img {


display: block;

height: 100%;

width: auto;

max-width: none;

object-fit: contain;

background: #fff;

pointer-events: none;

user-select: none;

-webkit-user-drag: none;


}

/* =========================================================
INDICATOR
========================================================= */

.protexaa-slider__indicator {


position: absolute;

left: 50%;

bottom: 5px;

width: 100px;

height: 4px;

transform: translateX(-50%);

background: rgba(0, 0, 0, 0.18);

border-radius: 999px;

overflow: hidden;

pointer-events: none;


}

.protexaa-slider__indicator-active {


position: absolute;

top: 50%;

left: 0;

width: 24px;

height: 2px;

transform:
    translate3d(0, -50%, 0);

background: #000;

border-radius: 999px;

will-change: transform;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


.protexaa-slider {

    width: calc(100% - 20px);

    margin: 10px;
}


.protexaa-slider__header {

    min-height: 32px;

    margin-bottom: 8px;

    padding-right: 8px;
}


.protexaa-slider__title {

    font-size: 17px;
}


.protexaa-slider__header-line {

    width: 100px;

    height: 3px;

    margin-right: 12px;

    flex-basis: 100px;
}


.protexaa-slider__header-line-short {

    width: 10px;

    height: 3px;

    margin-left: 12px;

    flex-basis: 10px;
}


.protexaa-slider__viewport {

    height: 33.333vh;

    min-height: 150px;
}


.protexaa-slider__track {

    gap: 4px;
}


.protexaa-slider__indicator {

    width: 100px;

    height: 4px;

    bottom: 5px;
}


.protexaa-slider__indicator-active {

    width: 22px;

    height: 2px;
}


}

/* =========================================================
REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.protexaa-slider__track {

    transition: none;
}


}