// Bulma variables - compatible with v0.9.x and v1.x
// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
// v1.x: CSS variables (--bulma-*) will be used if defined
// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)

// Colors
$black: var(--bulma-black, #0a0a0a);
$white: var(--bulma-white, #fff);
$light: var(--bulma-light, #f5f5f5);
$dark: var(--bulma-dark, #363636);
$primary: var(--bulma-primary, #00d1b2);
$link: var(--bulma-link, #485fc7);
$info: var(--bulma-info, #3e8ed0);
$success: var(--bulma-success, #48c78e);
$warning: var(--bulma-warning, #ffe08a);
$danger: var(--bulma-danger, #f14668);
$text: var(--bulma-text, #4a4a4a);
$background: var(--bulma-background, #f5f5f5);
$radius: var(--bulma-radius, 4px);
$speed: var(--bulma-speed, 0.25s);

$size-small: 0.75rem !default;
$size-normal: 1rem !default;
$size-medium: 1.25rem !default;
$size-large: 1.5rem !default;

// Size map
$sizes: (
	"small": $size-small,
	"normal": $size-normal,
	"medium": $size-medium,
	"large": $size-large
);

// Color map
$colors: (
	"primary": $primary,
	"link": $link,
	"info": $info,
	"success": $success,
	"warning": $warning,
	"danger": $danger
);

// Mixins for common styles
@mixin progress-colors($color) {
	&::-webkit-progress-value {
		background-color: $color;
	}

	&::-moz-progress-bar {
		background-color: $color;
	}
}

@mixin indeterminate-colors($color) {
	&::after {
		background-color: $color;
	}
}

@mixin custom-progress-colors($color) {
	.bbr-progress-fill {
		background-color: $color;
	}
}

.bbr-progress {
	width: 100%;
	appearance: none;
	height: $size-normal;
	border: none;
	border-radius: $radius;
	background-color: $background;
	overflow: hidden;

	// Custom progress bar for animation
	&.bbr-progress--animated {
		position: relative;
		background-color: $background;

		.bbr-progress-fill {
			height: 100%;
			background-color: $primary;
			border-radius: $radius;
			transition: width $speed;
			animation: bbr-progress-animated 1s linear infinite;
			background-image: linear-gradient(
				45deg,
				rgba(255, 255, 255, 0.2) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.2) 75%,
				transparent 75%,
				transparent
			);
			background-size: 1rem 1rem;
		}

		// Colors for custom progress bar
		@each $name, $color in $colors {
			&.is-#{$name} {
				@include custom-progress-colors($color);
			}
		}
	}

	&::-webkit-progress-bar {
		background-color: $background;
		border-radius: $radius;
	}

	&::-webkit-progress-value {
		background-color: $primary;
		border-radius: $radius;
		transition: width $speed;
	}

	&::-moz-progress-bar {
		background-color: $primary;
		border-radius: $radius;
	}

	&-value {
		margin-top: 0.25rem;
		font-size: $size-small;
		color: $text;
		text-align: center;
	}

	@each $name, $size in $sizes {
		&.is-#{$name} {
			height: $size;
		}
	}

	@each $name, $color in $colors {
		&.is-#{$name} {
			@include progress-colors($color);
		}
	}

	&--animated {
		&::-webkit-progress-value {
			animation: bbr-progress-animated 2s linear infinite;
			background-image: linear-gradient(
				45deg,
				rgba(255, 255, 255, 0.2) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.2) 75%,
				transparent 75%,
				transparent
			);
			background-size: 1rem 1rem;
		}

		&::-moz-progress-bar {
			animation: bbr-progress-animated 2s linear infinite;
			background-image: linear-gradient(
				45deg,
				rgba(255, 255, 255, 0.2) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.2) 75%,
				transparent 75%,
				transparent
			);
			background-size: 1rem 1rem;
		}
	}

	&--indeterminate {
		position: relative;
		background-color: $background;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 50%;
			background-color: $primary;
			border-radius: $radius;
			animation: bbr-progress-indeterminate 1.5s ease-in-out infinite;
		}

		@each $name, $color in $colors {
			&.is-#{$name} {
				@include indeterminate-colors($color);
			}
		}
	}
}

@keyframes bbr-progress-animated {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 1rem 0;
	}
}

@keyframes bbr-progress-indeterminate {
	0% {
		left: -50%;
	}
	100% {
		left: 100%;
	}
}