/* /var/www/art4point/user_service/app/static/css/components/progress.css */

/* 프로그레스 바 컨테이너 */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

/* 프로그레스 바 자체 */
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width 0.6s ease;
}

/* 프로그레스 바 크기 변형 */
.progress-sm {
    height: 0.5rem;
}

.progress-lg {
    height: 15px;
}

/* 프로그레스 바 색상 변형 */
.progress-bar-success {
    background-color: #28a745;
}

.progress-bar-info {
    background-color: #17a2b8;
}

.progress-bar-warning {
    background-color: #ffc107;
}

.progress-bar-danger {
    background-color: #dc3545;
}

/* 스트라이프 효과 */
.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* 애니메이션 효과 */
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* 원형 프로그레스 바 */
.progress-circle {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
}

.progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 8;
}

.progress-circle-bar {
    fill: none;
    stroke: #007bff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 0.6s ease;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
}

/* 프로그레스 바에 라벨이 있는 경우 */
.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.progress-label .label {
    font-weight: 500;
}

.progress-label .value {
    color: #6c757d;
}

/* 중첩된 프로그레스 바 (멀티 컬러) */
.progress-stacked {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.progress-stacked .progress-bar {
    border-radius: 0;
}

.progress-stacked .progress-bar:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.progress-stacked .progress-bar:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}