/**
 * Стили для кастомного скролл-бара с позиционированием
 * 
 * Сдвигает скролл-бар на 32px левее в элементе .question-card__explanation
 */

/* Скрываем стандартный скролл-бар */
.question-card__explanation,
.question-card__content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.question-card__explanation::-webkit-scrollbar,
.question-card__content::-webkit-scrollbar {
    display: none; /* WebKit браузеры */
}

/* Контейнер для кастомного скролл-бара */
.quiz-scrollbar-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    pointer-events: auto;
    z-index: 10;
    /* Позиция устанавливается через JavaScript */
}

/* Кастомный скролл-бар */
.quiz-scrollbar {
    position: absolute;
    top: 22px;
    bottom: 22px;
    height: calc(100% - 44px);
    right: 32px; /* Сдвиг на 32px левее */
    width: 8px;
    height: 100%;
    pointer-events: auto;
}

/* Трек скролл-бара */
.quiz-scrollbar-track {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Ползунок скролл-бара */
.quiz-scrollbar-thumb {
    position: absolute;
    right: 0;
    width: 8px;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    min-height: 20px;
}

/* Hover эффект для ползунка */
.quiz-scrollbar-thumb:hover {
    background-color: #fff;
}

.quiz-scrollbar-thumb:active {
    background-color: #fff;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .quiz-scrollbar {
        right: 24px; /* Уменьшенный сдвиг на мобильных */
        width: 6px;
    }
    
    .quiz-scrollbar-track {
        width: 6px;
    }
    
    .quiz-scrollbar-thumb {
        width: 6px;
    }
}

@media (max-width: 480px) {
    .quiz-scrollbar {
        right: 20px; /* Еще меньший сдвиг на маленьких экранах */
        width: 4px;
    }
    
    .quiz-scrollbar-track {
        width: 4px;
    }
    
    .quiz-scrollbar-thumb {
        width: 4px;
    }
}

/* Стили для quiz-new.css версии */
.question-card__explanation .quiz-scrollbar-thumb,
.question-card__content .quiz-scrollbar-thumb {
    background-color: #ffffff;
}

.question-card__explanation .quiz-scrollbar-thumb:hover,
.question-card__content .quiz-scrollbar-thumb:hover {
    background-color: #ffffff;
}

.question-card__explanation .quiz-scrollbar-thumb:active,
.question-card__content .quiz-scrollbar-thumb:active {
    background-color: #ffffff;
}

.question-card__explanation .quiz-scrollbar-track,
.question-card__content .quiz-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
}