.root {}

.head {
    text-align: center;
}

.headWrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.item {
    display: inline-block;
    position: relative;
    width: var(--steps-item-width);
    vertical-align: top;
}

.item-body {
    display: inline-block;
    color: var(--font-fourth-color);
    cursor: var(--cursor-pointer);
    position: relative;
    z-index: 2;
}

.root[readonly] .item-body {
    cursor: default;
}

.item[disabled] .item-body {
    color: var(--steps-item-color-disabled);
    cursor: var(--cursor-not-allowed);
}

.radio {
    display: inline-block;
    content: '';
    flex-shrink: 0;
    width: var(--steps-item-radio-size);
    height: var(--steps-item-radio-size);
    line-height: var(--steps-item-radio-size);
    font-size: 12px;
    border-radius: 100%;
    margin-left: -5px;
    background: var(--steps-item-radio-background);
    color: var(--steps-item-radio-color);
}
.radio[custom-icon] {
    display: flex;
    justify-content: center;
    align-items: center;
}
.radio:hover {
    border-color: var(--steps-item-radio-border-color-hover);
}

.root[shape-size="large"] .radio {
    width: var(--steps-item-radio-size-large);
    height: var(--steps-item-radio-size-large);
    line-height: var(--steps-item-radio-size-large);
}

.title {
    display: block;
    padding-top: 4px;
    line-height: var(--steps-item-radio-size);
}

.item .item-body::after {
    display: block;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 12px;
    height: 1px;
    width: 100%;
    background-color: var(--steps-item-radio-background);
}

.item[passed] .item-body::after {
    background-color: var(--steps-item-radio-background-passed);
}

.item:last-child .item-body::after {
    display: none;
}

.item[passed] .radio {
    background: var(--steps-item-radio-background-passed);
    color: var(--steps-item-radio-color-passed);
}

.body {
    margin-top: 20px;
}

.root[counter] .head {
    counter-reset: stop;
}

.root[counter] .item {
    counter-increment: step;
}

.root[counter] .radio::before {
    content: counter(step);
}

.root[layout="block"] .title {
    display: block;
}

.root[layout="inline"] .title {
    display: inline-block;
    padding: 0 4px;
    vertical-align: -1px;
}