@import "~theme/globals";

:host {
    display: flex;
    width: 100%;

    --line-height: 40px;
    --bar-margin: 16px 0;
    --height: var(--core-progressbar-height);

    --text-color: var(--core-progressbar-text-color);
    --progressbar-color: var(--core-progressbar-color);
    --progressbar-background: var(--core-progressbar-background);

    @each $color-name, $unused in $colors {
        &.ion-color-#{$color-name} {
            --progressbar-color: var(--#{$color-name});
            --progressbar-background: var(--#{$color-name}-tint);
        }
    }

    .core-progress-text {
        line-height: var(--line-height);
        font-size: 0.9rem;
        color: var(--text-color);
        width: 55px;
        text-align: center;
    }

    progress {
        -webkit-appearance: none;
        appearance: none;
        height: var(--height);
        margin: var(--bar-margin);
        padding: 0;
        display: block;
        width: 100%;
        flex: 1;

        &[value]::-webkit-progress-bar {
            background-color: var(--progressbar-background);
            border-radius: var(--height);
            border: 0;
            box-shadow: none;
        }

        &[value]::-webkit-progress-value {
            background-color: var(--progressbar-color);
            border-radius: var(--height);
        }
    }

    ion-progress-bar {
        --progress-background: var(--progressbar-color);
        --buffer-background: var(--progressbar-background);
        border-radius: var(--height);
        height: var(--height);
        margin-top: calc((var(--line-height) - var(--height)) /2);
        margin-bottom: calc((var(--line-height) - var(--height)) /2);

        &::part(progress) {
            border-radius: var(--height);
        }
    }
}