/* Progress Bar Library - Refactored version */

.progress-bar {
    /* Progress bar container */
    width: 100%;
    height: 20px;
    background-color: var(--pb-background, #f0f0f0);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar::after {
    /* Fillable part - using pseudo-element */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--pb-progress, 0%);
    background-color: var(--pb-color, #3498db);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Themes */

.theme-blue {
    --pb-color: #2196f3;
    --pb-background: #e3f2fd;
}

.theme-blue::after {
    background: linear-gradient(to right, #2196f3, #1976d2);
}

.theme-green {
    --pb-color: #4caf50;
    --pb-background: #e8f5e9;
}

.theme-green::after {
    background: linear-gradient(to right, #4caf50, #2e7d32);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.theme-dark {
    --pb-color: #00bcd4;
    --pb-background: #2d2d2d;
}

.theme-dark::after {
    background: linear-gradient(to right, #00bcd4, #008ba3);
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.7);
}

.theme-dark {
    border: 1px solid #444;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Size modifiers */

.size-small {
    height: 10px;
    border-radius: 5px;
}

.size-small::after {
    border-radius: 5px;
}

.size-large {
    height: 30px;
    border-radius: 15px;
}

.size-large::after {
    border-radius: 15px;
}

/* Pattern modifiers */

.striped::after {
    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: 20px 20px;
}

/* Ensure stripes work with themes - используем background-color вместо gradient */
.theme-blue.striped::after {
    background-color: #2196f3;
    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
    );
}

.theme-green.striped::after {
    background-color: #4caf50;
    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
    );
}

.theme-dark.striped::after {
    background-color: #00bcd4;
    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
    );
}