@import "common/var.scss";

.c-progress {
    position: relative;
    width: 100%;
}

.c-progress__bar[value] {
    appearance: none;
    border: none;
    border-radius: 4px;
    width: 100%;
    height: 1.5em;
    position: relative;
    overflow: hidden;

    // Comma separating these selectors causes a bug, so repitition is necessary.
    &::-webkit-progress-value {
        transition: width 90ms ease-in;
    }

    &::-moz-progress-bar {
        transition: width 90ms ease-in;
    }

    &::-ms-fill {
        transition: width 90ms ease-in;
    }
}

.c-progress__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.c-progress-bar__message {
    color: $color-white;
    font-size: .85em;
    height: auto;
    letter-spacing: .3px;
    left: 0;
    padding: .2em 0 .25em .6em;
    position: absolute;
    top: 1px;
    z-index: 1;
    white-space: nowrap;
    width: 98%;
    text-overflow: ellipsis;
    overflow-x: hidden;
    a, .link {
        color: $color-white;
        text-decoration: underline; // Since color can't differeniate, show underline.
        &:hover, &:active, &:focus {
            color: $color-white;
        }
    }
    strong {
        font-weight: 700; // Standard bold weight isn't quite heavy enough here.
    }
}

.c-progress-circle__wrapper {
    position: relative;
}

.c-progress-circle__message {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin c-progress-fill($color: $color-brand--060) {
    .c-progress__bar[value] {
        border: 1px solid rgba($color, .4);

        &::-webkit-progress-value {
            background-color: $color;
            border-radius: 0 3px 3px 0;
        }

        &::-moz-progress-bar {
            background-color: $color;
            border-radius: 0 3px 3px 0;
        }

        &::-ms-fill {
            background-color: $color;
            border-radius: 0 3px 3px 0;
        }
    }

    .c-progress__message {
        text-shadow: 0 1px 0 darken($color, 10%);

        a, .link {
            text-shadow: 0 1px 0 darken($color, 10%);
        }
    }

    .c-progress__circle--active {
        stroke: $color;
        transform: rotate(-89.3deg);
    }
}

@mixin c-progress-remaining($color: $color-brand--060) {
    .c-progress__bar[value] {
        background-color: rgba($color, .2);

        &::-webkit-progress-bar {
            background-color: rgba($color, .2);
            border-radius: 0 3px 3px 0;
        }
    }

    .c-progress__circle--background {
        stroke: rgba($color, .3);
    }
}

.c-progress__fill--default {
    @include c-progress-fill();
}

.c-progress__fill--success {
    @include c-progress-fill($color-success-dark);
}

.c-progress__fill--warning {
    @include c-progress-fill($color-warning-dark);
}

.c-progress__fill--danger {
    @include c-progress-fill($color-danger-dark);
}

.c-progress__remaining--default {
    @include c-progress-remaining();
}

.c-progress__remaining--success {
    @include c-progress-remaining($color-success-dark);
}

.c-progress__remaining--warning {
    @include c-progress-remaining($color-warning-dark);
}

.c-progress__remaining--danger {
    @include c-progress-remaining($color-danger-dark);
}