/*
Last modified: 2024-09-11 09:30:00
*/
@charset "utf-8";
@import (optional, reference) "var.less";
/*Progress*/
AX-PROGRESS{
    .v3-flex-center();
    vertical-align: middle;
}
._progress {
    --_prog-c: var(--_c-prim);
    --_prog-grad: var(--_c-prim-aj);
    --_prog-bg: var(--_c-text-bg);
    --_prog-w: calc(var(--_sz-input)*3);
    --_prog-thk: .6rem;
    --_prog-fs: var(--_sz-font);
    --_prog-lh: var(--_sz-list);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    svg {
        width: var(--_prog-w);
        path {
            fill: none;
            stroke-width: var(--_prog-thk);
        }
        path[rep=track] {
            stroke: var(--_prog-bg);
        }
        path[rep=bar] {
            stroke: var(--_prog-c);
            transition: stroke var(--_dur-3) var(--_bez-eo), stroke-width var(--_dur-3) var(--_bez-eo);
        }
    }
    [rep=label] {
        font-size: var(--_prog-fs);
        line-height: var(--_prog-lh);
    }
    [rep=control] {
        font-size: var(--_prog-fs);
        .v3-trans-all();
        &:hover {
            color: var(--_c-prim);
            cursor: pointer;
        }
        &[disabled] {
            opacity: 0.5;
        }
    }
}
._progress [rep=complete] {
    display: none;
}
._progress[completed] [rep=complete] {
    color: var(--_prog-c);
    display: inline-block;
}
._progress[completed] [rep=unit],
._progress[completed] [rep=number],
._progress[completed] [rep=tips] {
    display: none;
}
._progress[type=line] {
    [rep=text] {
        display: flex;
    }
    [rep=label],
    [rep=control] {
        margin-left: var(--_sz-space);
    }
    &:has([rep=tips]) {
        flex-direction: column;
        align-items: flex-start;
        [rep=track] {
            width: 100%;
        }
        [rep=text] {
            width: 100%;
        }
        [rep=label] {
            margin-left: 0;
            flex: auto;
            display: flex;
        }
        [rep=tips] {
            flex: auto;
        }
    }
    [rep=track] {
        height: var(--_prog-thk);
        border-radius: var(--_prog-thk);
        background-color: var(--_prog-bg);
        flex: auto;
        display: block;
    }
    &[simple] [rep=track] {
        background: transparent;
    }
    [rep=bar] {
        height: 100%;
        background-color: var(--_prog-c);
        border-radius: var(--_prog-thk);
        transition: width var(--_dur-2) var(--_bez-eo), background-color var(--_dur-2) var(--_bez-eo);
    }
    &[linecap=square] [rep=track],
    &[linecap=square] [rep=bar] {
        border-radius: 0;
    }
}
._progress[type*=circle] {
    [rep=text] {
        text-align: center;
        position: absolute;
        left: 50%;
    }
}
._progress[type=circle] {
    path {
        transform: rotate(90deg);
        transform-origin: 50% 50%
    }
    [rep=text] {
        transform: translate(-50%, -50%);
        top: 50%;
    }
}
._progress[type=semicircle] [rep=text] {
    transform: translate(-50%, 0);
    bottom: var(--_sz-space);
}
._progress[type=gapcircle] [rep=text] {
    transform: translate(-50%, -50%);
    top: 60%;
}
._progress[thk=xxs] {
    --_prog-thk: .1rem;
}
._progress[thk=xs] {
    --_prog-thk: .2rem;
}
._progress[thk=sm] {
    --_prog-thk: var(--_sz-min);
}
._progress[thk=md] {
    --_prog-thk: var(--_sz-root);
}
._progress[thk=lg] {
    --_prog-thk: var(--_sz-ignore);
}
._progress[thk=xl] {
    --_prog-thk: var(--_sz-font);
}
._progress[thk=xxl] {
    --_prog-thk: var(--_sz-brief);
}
._progress:where([size][type=line]) {
    width: var(--_prog-w);
}
._progress[size=xxs] {
    --_prog-w: var(--_sz-body);
    --_prog-fs: var(--_sz-ignore);
    --_prog-lh: var(--_sz-brief);
    &[type=semicircle] [rep=text] {
        bottom: 0;
    }
}
._progress[size=xs] {
    --_prog-w: var(--_sz-input);
    --_prog-fs: var(--_sz-ignore);
    --_prog-lh: var(--_sz-brief);
    &[type=semicircle] [rep=text] {
        bottom:0;
    }
}
._progress[size=sm] {
    --_prog-w: calc(var(--_sz-input)*2);
    --_prog-fs: var(--_sz-ignore);
    --_prog-lh: var(--_sz-brief);
    &[type=semicircle] [rep=text] {
        bottom: 0;
    }
}
._progress[size=md] {
    --_prog-w: calc(var(--_sz-input)*4);
    &[type=semicircle] [rep=text] {
        bottom: var(--_sz-space);
    }
}
._progress[size=lg] {
    --_prog-w: calc(var(--_sz-input)*5);
    &[type=semicircle] [rep=text] {
        bottom: var(--_sz-ignore);
    }
}
._progress[size=xl] {
    --_prog-w: calc(var(--_sz-input)*5);
    &[type=semicircle] [rep=text] {
        bottom: var(--_sz-brief);
    }
}
._progress[size=xxl] {
    --_prog-w: calc(var(--_sz-input)*6);
    &[type=semicircle] [rep=text] {
        bottom: var(--_sz-list);
    }
}
._progress[type*=circle] [rep=bar]:hover {
    stroke-width: calc(var(--_prog-thk)*1.2);
}
._progress[gradient] {
    &:where([type=line]) [rep=bar] {
        background: linear-gradient(to right, var(--_prog-c), var(--_prog-grad));
    }
}
._progress[theme=prim] {
    --_prog-bg: var(--_c-prim-bg);
    --_prog-c: var(--_c-prim);
    --_prog-grad: var(--_c-prim-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-prim);
    }
}
._progress[theme=error] {
    --_prog-bg: var(--_c-error-bg);
    --_prog-c: var(--_c-error);
    --_prog-grad: var(--_c-error-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-error);
    }
}
._progress[theme=succ] {
    --_prog-bg: var(--_c-succ-bg);
    --_prog-c: var(--_c-succ);
    --_prog-grad: var(--_c-succ-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-succ);
    }
}
._progress[theme=warn] {
    --_prog-bg: var(--_c-warn-bg);
    --_prog-c: var(--_c-warn);
    --_prog-grad: var(--_c-warn-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-warn);
    }
}
._progress[theme=info] {
    --_prog-bg: var(--_c-info-bg);
    --_prog-c: var(--_c-info);
    --_prog-grad: var(--_c-info-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-info);
    }
}
._progress[theme=issue] {
    --_prog-bg: var(--_c-issue-bg);
    --_prog-c: var(--_c-issue);
    --_prog-grad: var(--_c-issue-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-issue);
    }
}
._progress[theme=text] {
    --_prog-bg: var(--_c-text-bg);
    --_prog-c: var(--_c-text);
    --_prog-grad: var(--_c-text-aj);
    &:where([type*=circle][gradient]) [rep=bar] {
        stroke: url(#svgbar-text);
    }
}
