/* Progress Wheel styles */
.app-progress-wheel {
    transition: all 0.3s ease-in-out;
}

/* Add color transitions to your progress wheels */
.app-progress-wheel * {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Native progress element styling */
progress.app-progress-wheel-native {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: 100%;
}

progress.app-progress-wheel-native::-webkit-progress-bar {
    border-radius: 50%;
    background-color: var(--background-lighten-color, #f3f3f3);
    overflow: hidden;
}

progress.app-progress-wheel-native::-webkit-progress-value {
    background-color: var(--primary-color, #3498db);
    transition: width 0.3s ease;
}

progress.app-progress-wheel-native::-moz-progress-bar {
    background-color: var(--primary-color, #3498db);
    border-radius: 50%;
    transition: width 0.3s ease;
}

/* Size variants */
.app-progress-wheel-small {
    transform: scale(0.75);
}

.app-progress-wheel-large {
    transform: scale(1.5);
}