/* PARA ESTILO INVERSE */
.ctn-example-live-demo.inverse {
    background: var(--color-gray-700, #314254);
}

.ctn-example-live-demo comp-progress[data-type='spinner'] {
    align-self: center;
}

/* PARA ESTILO INVERSE */

comp-progress {
    width: 100%;
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
    {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-2);
    width: 100%;
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.ctn-counter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-space-3);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.ctn-counter span {
    margin: var(--spacing-space-0);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.progress-counter {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 8px;
    background-color: var(--color-neutral-200);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.progress-bar-counter {
    width: 0%;
    height: 100%;
    background-color: var(--color-info-600);
    border-radius: var(--border-radius-corner-s, 4px);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.progress-loading {
    font: var(--font-body-strong);
    color: var(--color-gray-500);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.progress-percentage {
    font: var(--font-caption-medium);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    column-gap: var(--spacing-space-2);
}

comp-progress[data-type='bar']

/* :not([indeterminate]) */
.progress-time {
    font: var(--font-caption-medium);
    color: var(--color-gray-500);
}

/* progress bar error */
comp-progress[data-type='bar'][error] .progress-bar-counter {
    background: var(--color-danger-600, #D82525);
    width: 100%;
}

comp-progress[data-type='bar'][error] i {
    width: 20px;
    height: 20px;
    color: var(--color-danger-600, #D82525);
    font-size: 20px;
}

/* progress bar error */

/* progress bar completed */
comp-progress[data-type='bar'][completed] .progress-bar-counter {
    background: var(--color-success-600, #20B351);
}


comp-progress[data-type='bar'][completed] i {
    width: 20px;
    height: 20px;
    color: var(--color-success-600, #20B351);
    font-size: 20px;
}

/* progress bar completed */

/* progress bar indeterminate */
comp-progress[data-type='bar'][indeterminate] .progress-indeterminate-value {
    background-color: var(--color-neutral-200);
    border-radius: 8px;
    height: 4px;
    position: relative;
    overflow: hidden;
}

comp-progress[data-type='bar'][indeterminate] .progress-indeterminate {
    background-color: var(--color-info-600);
    border-radius: 8px;
    position: absolute;
    bottom: 0;
    top: 0;
    width: 20%;
    animation: indeterminate-progress-bar 1.5s linear infinite;
}

comp-progress[data-type='bar']:not([data-label]) {
    display: grid;
    grid-template-areas:
        'bar icon_text'
        'description description';
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: center;
    gap: 0;
}

comp-progress[data-type='bar']:not([data-label]) .ctn-counter {
    grid-area: icon_text;
    display: inline;
}

comp-progress[data-type='bar']:not([data-label])[error] .progress-percentage {
    margin-left: var(--spacing-space-3);
}

comp-progress[data-type='bar']:not([data-label])[completed] .progress-percentage,
comp-progress[data-type='bar']:not([data-label])[percentage] .progress-percentage {
    margin-left: var(--spacing-space-3);
    min-width: 40px;
    text-align: end;
    display: block;
}

comp-progress[data-type='bar']:not([data-label])[percentage="100"] .progress-percentage {
    display: flex;
}
comp-progress[data-type='bar']:not([data-label])[percentage="100"] .progress-percentage span{
    width: 40px;
}

comp-progress[data-type='bar']:not([data-label]) .progress-counter {
    grid-area: bar;
}



@keyframes indeterminate-progress-bar {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(500%);
    }
}

/* progress bar indeterminate */

/* progress spinner */
comp-progress[data-type='spinner'] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    height: fit-content;
}

comp-progress[data-type='spinner'] svg {
    transform: rotate(-90deg);
    width: 20px;
    height: 20px;
}

comp-progress[data-type='spinner'][compact] {
    max-width: 20px;
    max-height: 20px;
}

comp-progress[data-type='spinner'][compact] svg {
    width: 20px;
    height: 20px;
}

comp-progress[data-type='spinner']:not([compact]) {
    max-width: 40px;
    max-height: 40px;
}

comp-progress[data-type='spinner']:not([compact]) svg {
    width: 40px;
    height: 40px;
}

comp-progress[data-type='spinner'] .spinner-bg {
    fill: none;
    stroke-width: 12;
}

comp-progress[data-type='spinner']:not([inverse]) .spinner-bg {
    stroke: var(--color-transparency-dark8);
}

comp-progress[data-type='spinner'][inverse] .spinner-bg {
    stroke: var(--color-transparency-light24);
}

comp-progress[data-type='spinner']:not([inverse]) .spinner-fg {
    stroke: var(--color-primary-600);
    /* Este stroke será sobrescrito si se define uno en línea */
}

comp-progress[data-type='spinner'][inverse] .spinner-fg {
    stroke: var(--color-neutral-0);
    /* Este stroke será sobrescrito si se define uno en línea */
}

comp-progress[data-type='spinner']:not([inverse])[danger] .spinner-fg {
    stroke: var(--color-danger-600, #D82525);
}

.spinner-fg {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
    animation: spin 1.5s linear infinite;
    transform-origin: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* progress spinner */