@use "../../styles/bootstrap/mixins/border-radius";
@use "../../styles/bootstrap/mixins/gradients";
@use "../../styles/bootstrap/mixins/transition";
@use "../../styles/bootstrap/variables" as bootstrap-variables;
@use "../../styles/variables";
@use "./progress-circle.scss";
@use "./progress-strip.scss";

@mixin set-progress-size($height) {
    &.thy-progress-circle {
        height: inherit;
        background-color: transparent;
    }

    .thy-progress-strip-outer {
        height: $height;
        background-color: bootstrap-variables.$progress-bg;
    }
}

// .progress 在之后会移除，使用 thy-progress 代替
.progress,
.thy-progress {
    display: flex;
    align-items: center;
    font-size: bootstrap-variables.$progress-font-size;
}

@each $size, $height in variables.$progress-size {
    .progress-#{$size} {
        @include set-progress-size($height);
    }
}

.thy-progress-strip-outer {
    display: flex;
    flex: 1;
    height: variables.$progress-height;
    background-color: bootstrap-variables.$progress-bg;
    overflow: hidden; // force rounded corners by cropping it
    font-size: bootstrap-variables.$progress-font-size;
    @include border-radius.border-radius(100px);
    @include set-progress-size(variables.$progress-height);
}

.thy-progress-strip-text:not(:empty) {
    margin-left: 8px;
    width: 40px;
    white-space: nowrap;
    color: variables.$gray-800;
    font-size: variables.$font-size-base;
}
