.tint-slider-container {
width: 100%;
margin: 0 auto;
font-family: inherit;
}
.tint-selector-container {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tint-selector-btn {
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #f5f5f5;
color: #333;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.25s ease;
}
.tint-selector-btn.is-active {
background-color: #C79746;
color: #fff;
border-color: #C79746;
}
.tint-slider-images {
position: relative;
width: 100%;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
cursor: ew-resize;
border-radius: 8px;
--slide-percent: 50%;
}
.tint-slider-before,
.tint-slider-after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tint-slider-before {
position: relative;
}
.tint-slider-images img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.tint-slider-after {
pointer-events: none;
z-index: 2;
clip-path: inset(0 calc(100% - var(--slide-percent, 50%)) 0 0);
}
.tint-slider-after img {
width: 100%;
height: 100%;
object-fit: cover;
} .tint-slider-label {
position: absolute;
bottom: 15px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 3px;
pointer-events: none;
letter-spacing: 0.5px;
}
.tint-label-before {
left: 15px;
z-index: 1;
}
.tint-label-after {
right: 15px;
z-index: 3;
} .tint-slider-handle {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background-color: #C79746;
cursor: ew-resize;
transform: translateX(-50%);
z-index: 10;
}
.tint-slider-handle::before,
.tint-slider-handle::after {
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 50%;
background-color: #C79746;
transform: translateX(-50%);
}
.tint-slider-handle::before {
top: 0;
}
.tint-slider-handle::after {
bottom: 0;
}
.tint-slider-handle-arrows {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background-color: inherit;
border-radius: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.tint-slider-handle-arrows svg {
width: 20px;
height: 20px;
}