@require "variables"

unless flat-build {
    @require "node_modules/boundless-button/style"
}

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

.b-progress-wrapper {
    border: Progress-borderWidth solid Progress-borderColor;
    border-radius: borderRadius;
    overflow: hidden;
    position: relative;
    height: Progress-height;
    width: Progress-width;
}

.b-progress-wrapper[data-progress]::before {
    color: Progress-label-color;
    content: attr(data-progress);
    line-height: Progress-height;
    padding-left: 10px;
    position: relative;
    text-align: left;
    z-index: 1;
}

.b-progress {
    background: Progress-backgroundColor;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

@keyframes interdeterminate-progress-bar {
    from { opacity: 0; }
    to { opacity: 1; }
}

.b-progress-indeterminate {
    background: Progress-backgroundColor-indeterminate;
    border-color: Progress-borderColor-indeterminate;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation: interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;

    ~ .b-progress-label {
        color: Progress-label-color-indeterminate;
    }
}