.ghostkit-progress {
    --gkt-progress__height: 15px;
    --gkt-progress__border-radius: var(--gkt-border-radius);
    --gkt-progress__background-color: var(--gkt-color-light-gray);
    --gkt-progress--caption__margin-bottom: 0.3em;
    --gkt-progress--caption__font-size: 0.85em;
    --gkt-progress--count__padding-v: 0.1em;
    --gkt-progress--count__padding-h: 0.7em;
    --gkt-progress--count__font-size: 0.6em;
    --gkt-progress--count__border-radius: 1em;
    --gkt-progress--count__color: #fff;
    --gkt-progress--count__background-color: var(--gkt-color-dark-gray);
    --gkt-progress--count-arrow__size: 0.35em;
    --gkt-progress--bar__width: 0;
    --gkt-progress--bar__background-color: var(--gkt-color-primary);
    --gkt-progress--bar-striped__background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .1) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .1) 0, hsla(0, 0%, 100%, .1) 75%, transparent 0, transparent);
    --gkt-progress--bar-striped__background-size: 15px 15px;
    --gkt-progress__transition-duration: var(--gkt-transition-duration);
    --gkt-progress__transition-easing: var(--gkt-transition-easing)
}

.ghostkit-progress-caption {
    display: block;
    font-size: var(--gkt-progress--caption__font-size);
    margin-bottom: var(--gkt-progress--caption__margin-bottom)
}

.ghostkit-progress-bar-count {
    position: relative
}

.ghostkit-progress-bar-count>div {
    background-color: var(--gkt-progress--count__background-color);
    border-radius: var(--gkt-progress--count__border-radius);
    bottom: 100%;
    color: var(--gkt-progress--count__color);
    font-size: var(--gkt-progress--count__font-size);
    margin-bottom: calc(.2em + var(--gkt-progress--count-arrow__size));
    padding: var(--gkt-progress--count__padding-v) var(--gkt-progress--count__padding-h);
    position: absolute;
    right: 0;
    transform: translateX(50%);
    white-space: nowrap
}

.ghostkit-progress-bar-count>div:after {
    border-left: var(--gkt-progress--count-arrow__size) solid transparent;
    border-right: var(--gkt-progress--count-arrow__size) solid transparent;
    border-top: var(--gkt-progress--count-arrow__size) solid var(--gkt-progress--count__background-color);
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin-left: calc(var(--gkt-progress--count-arrow__size)*-1);
    position: absolute;
    top: 100%;
    width: 0
}

.ghostkit-progress-wrap {
    background-color: var(--gkt-progress__background-color);
    border-radius: var(--gkt-progress__border-radius);
    height: var(--gkt-progress__height);
    overflow: hidden
}

.ghostkit-progress-bar,
.ghostkit-progress-wrap {
    transition: var(--gkt-progress__transition-duration) background-color var(--gkt-progress__transition-easing)
}

.ghostkit-progress-bar {
    background-color: var(--gkt-progress--bar__background-color);
    height: 100%;
    width: var(--gkt-progress--bar__width)
}

.ghostkit-progress-bar-striped .ghostkit-progress-bar {
    background-image: var(--gkt-progress--bar-striped__background-image);
    background-size: var(--gkt-progress--bar-striped__background-size)
}