.comp-stepper{
    position: relative;
}
.comp-stepper[position="horizontal"] {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.comp-stepper .ctn-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: max-content;
}
.comp-stepper[readonly] .ctn-step{
    cursor: default;
}
.comp-stepper .ctn-step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comp-stepper .ctn-step-text .title-step{
    color: var(--color-neutral-600, #425567);
    text-align: center;
    font: var(--font-body-strong);
    margin: 4px 0 0 0;
    white-space: nowrap;
}
.comp-stepper .ctn-step-text .description-step{
    color: var(--color-neutral-500, #566A80);
    text-align: center;
    font: var(--font-caption-small);
    margin: 0;
    white-space: nowrap;
}

.comp-stepper[position="vertical"] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.comp-stepper[position="vertical"] .ctn-step{
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}

.comp-stepper[position="vertical"][type="compact"] .ctn-step{
    margin-bottom: 32px;
}
.comp-stepper[position="vertical"][type="full"] .ctn-step{
    margin-bottom: 24px;
}
.comp-stepper[position="vertical"][type="full-text"] .ctn-step,
.comp-stepper[position="vertical"][type="compact-text"] .ctn-step{
    min-height: 48px;
}
.comp-stepper[position="vertical"] .ctn-step-text{
    align-items: flex-start;
}  
.comp-stepper[position="vertical"] .ctn-step-text .title-step{
    margin: 0;
}
.comp-stepper[position="vertical"] .ctn-step .step::after{
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: var(--color-neutral-200);
    border-radius: 4px;
    top: calc(100% + 4px);
}   
.comp-stepper[position="vertical"][type="compact"] .ctn-step .step::after,
.comp-stepper[position="vertical"][type="compact-text"] .ctn-step .step::after{
    height: 28px;
}    
.comp-stepper[position="vertical"] .ctn-step:last-child .step::after{
    display: none;
}    
.comp-stepper[type="full"] .ctn-step-text,
.comp-stepper[type="compact"] .ctn-step-text{
    display: none !important;
}
.comp-stepper .step{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-corner-xxl, 32px);
    color: var(--color-neutral-500, #566A80);
    font: var(--font-caption-medium-strong);
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    line-height: 1;
    flex-shrink: 0;
}
.comp-stepper[type="full"] .step,
.comp-stepper[type="full-text"] .step{
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-neutral-400, #8CA2B5);
}
.comp-stepper[type="compact"] .step,
.comp-stepper[type="compact-text"] .step{
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-neutral-500, #566A80);
    font-size: 0;
}

.comp-stepper[type="full"] .step[status="select"],
.comp-stepper[type="full-text"] .step[status="select"]{
    background: var(--color-primary-600, #0E55B9);
    border: none;
    color: var(--color-neutral-0, #FFF);
}

.comp-stepper[type="compact"] .step[status="select"],
.comp-stepper[type="compact-text"] .step[status="select"]{
    border: none;
    color: var(--color-primary-600, #0E55B9);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z" stroke="%230E55B9"/><circle cx="8" cy="8" r="5" fill="%230E55B9"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.comp-stepper[type="full"] .step[status="complete"],
.comp-stepper[type="full-text"] .step[status="complete"]{
    background: var(--color-primary-600, #0E55B9);
    border: none;
    color: var(--color-neutral-0, #FFF);
    font-size: 0;
}

.comp-stepper[type="full"] .step[status="complete"]::before,
.comp-stepper[type="full-text"] .step[status="complete"]::before{
    position: absolute;
    font-size: 16px;
    content: "\e86c";
    font: normal normal normal 16px / 1 "Material Icons Round";
    speak: never;	
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    display: block;
}

.comp-stepper[type="compact"] .step[status="complete"],
.comp-stepper[type="compact-text"] .step[status="complete"]{
    border: none;
    background: var(--color-primary-600, #0E55B9);
}

.comp-stepper[type="full"] .step[status="error"],
.comp-stepper[type="full-text"] .step[status="error"]{
    background: var(--color-danger-600, #D82525);
    border: none;
    color: var(--color-neutral-0, #FFF);
    font-size: 0;
}

.comp-stepper[type="full"] .step[status="error"]::before,
.comp-stepper[type="full-text"] .step[status="error"]::before{
    position: absolute;
    font-size: 16px;
    content: "\e5c9";
    font: normal normal normal 16px / 1 "Material Icons Round";
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
}
.comp-stepper[type="compact"] .step[status="error"],
.comp-stepper[type="compact-text"] .step[status="error"]{
    border: none;
    background: var(--color-danger-600, #D82525);
}
.comp-stepper .ctn-step:focus-visible{
    outline: 1px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 4px;
    border-radius: var(--border-radius-corner-md, 8px);
    z-index: 1;
}
.comp-stepper[type="full"] .ctn-step:focus-visible{
    border-radius: 4px;
}
.comp-stepper[type="compact"] .ctn-step:focus-visible{
    border-radius: 2px;
}
.comp-stepper:not([readonly]) .ctn-step:hover .step{
    background: var(--color-neutral-100, #F3F4F7);
}
.comp-stepper:not([readonly]) .ctn-step:hover .title-step{
    text-decoration-line: underline;
}
.comp-stepper:not([readonly]) .ctn-step:active .step{
    background: var(--color-neutral-200, #D5DFEC);
}
.comp-stepper:not([readonly]) .ctn-step:active .title-step{
    text-decoration-line: underline;
    color: var(--color-neutral-700, #314254);
}
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="select"],
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="complete"]{
    background: var(--color-primary-700, #164FA1);;
}
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="select"] .title-step,
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="complete"] .title-step{
    text-decoration-line: underline;
}
.comp-stepper:not([readonly]) .ctn-step:active .step[status="select"],
.comp-stepper:not([readonly]) .ctn-step:active .step[status="complete"]{
    background: var(--color-primary-800, #163A79);
}
.comp-stepper:not([readonly]) .ctn-step:active .step[status="select"] .title-step,
.comp-stepper:not([readonly]) .ctn-step:active .step[status="complete"] .title-step{
    text-decoration-line: underline;
    color: var(--color-neutral-700, #314254);
}
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="error"]{
    background: var(--color-danger-700, #BA1B1B);
}
.comp-stepper:not([readonly]) .ctn-step:hover .step[status="error"] .title-step{
    text-decoration-line: underline;
}
.comp-stepper:not([readonly]) .ctn-step:active .step[status="error"]{
    background: var(--color-danger-800, #9C1313);
}
.comp-stepper:not([readonly]) .ctn-step:active .step[status="error"] .title-step{
    text-decoration-line: underline;
    color: var(--color-neutral-700, #314254);
}
.comp-stepper:not([readonly])[type="compact"] .ctn-step:hover .step[status="select"],
.comp-stepper:not([readonly])[type="compact-text"] .ctn-step:hover .step[status="select"]{
    background: unset;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z" stroke="%23164FA1"/><circle cx="8" cy="8" r="5" fill="%23164FA1"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}
.comp-stepper:not([readonly])[type="compact"] .ctn-step:active .step[status="select"],
.comp-stepper:not([readonly])[type="compact-text"] .ctn-step:active .step[status="select"]{
    background: unset;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z" stroke="%23163A79"/><circle cx="8" cy="8" r="5" fill="%23163A79"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}
.comp-stepper:not([readonly]) .ctn-step:disabled{
    cursor: not-allowed;
}
.comp-stepper .ctn-step:disabled .step{
    background: var(--color-neutral-200, #D5DFEC) !important;
    color: var(--color-neutral-400, #8CA2B5) !important;
    border: none;
}
.comp-stepper .ctn-step:disabled .title-step,
.comp-stepper .ctn-step:disabled .description-step{
    color: var(--color-neutral-300, #B7C9DF) !important;
    text-decoration-line: none !important;
}   
.comp-stepper[type="compact"] .ctn-step:disabled .step[status="select"]{
    border: none;
    background: var(--color-neutral-200, #D5DFEC);
}
.comp-stepper[type="compact"] .ctn-step:disabled .step[status="select"]:before{
    background-color:  var(--color-neutral-200, #D5DFEC);
}

@media (max-width: 1279px) {
    .comp-stepper[position="horizontal"]{
        justify-content: space-between;
    }

    .comp-stepper .description-step{
        display: none;
    }
}