.pasos-a
  position: relative

  &__numero
    align-self: stretch
    position: relative
    &::after
      content: ""
      position: absolute
      border-left: 3px solid
      z-index: 1

  .bottom::after
    height: 50%
    left: 50%
    top: 50%

  .full::after
    height: 100%
    left: 50%

  .top::after
    height: 50%
    left: 50%
    top: 0

  &__linea
    div
      padding: 0
      height: 40px

    .hor-line
      border-top: 3px solid
      margin: 0
      top: 17px
      position: relative

    &__esquina
      display: flex
      overflow: hidden

      &__linea
        border: 3px solid
        width: 100%
        position: relative
        border-radius: 15px

    .top-right
      left: 50%
      top: -50%

    .left-bottom
      left: calc(-50% + 3px)
      top: calc(50% - 3px)

    .top-left
      left: calc(-50% + 3px)
      top: -50%

    .right-bottom
      left: 50%
      top: calc(50% - 3px)


  &__circle
    width: 50px
    height: 50px
    min-width: 50px
    border-radius: 50%
    z-index: 2
    position: relative
    div
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%,-50%)

  &.color-primario
    .pasos-a
      &__numero
        &::after
          border-left-color: $color-primario
      &__linea
        .hor-line
          border-top-color: $color-primario

        &__esquina
          &__linea
            border-color: $color-primario
      &__circle
        background-color: $color-primario
        div
          color: textColor($color-primario)
  &.color-secundario
    .pasos-a
      &__numero
        &::after
          border-left-color: $color-secundario
      &__linea
        .hor-line
          border-top-color: $color-secundario

        &__esquina
          &__linea
            border-color: $color-secundario
      &__circle
        background-color: $color-secundario
        div
          color: textColor($color-secundario)
  &.color-acento-contenido
    .pasos-a
      &__numero
        &::after
          border-left-color: $color-acento-contenido
      &__linea
        .hor-line
          border-top-color: $color-acento-contenido

        &__esquina
          &__linea
            border-color: $color-acento-contenido
      &__circle
        background-color: $color-acento-contenido
        div
          color: textColor($color-acento-contenido)
  &.color-acento-botones
    .pasos-a
      &__numero
        &::after
          border-left-color: $color-acento-botones
      &__linea
        .hor-line
          border-top-color: $color-acento-botones

        &__esquina
          &__linea
            border-color: $color-acento-botones
      &__circle
        background-color: $color-acento-botones
        div
          color: textColor($color-acento-botones)


.pasos-b
  display: flex
  flex-direction: column
  &__header
    display: flex
    &__items
      display: flex
      flex: auto
    &__item
      display: flex
      flex-direction: column
      align-items: center
      &__tittle
        text-align: center
        line-height: 1.1em
      &__line-container
        width: 100%
        display: flex
        align-items: center
        margin-bottom: 10px
        &:after, &:before
          content: ''
          display: block
          width: 50%
          height: 3px
          background-color: $lighter-gray
      &__dot
        min-width: 40px
        max-width: 40px
        min-height: 40px
        max-height: 40px
        border: 3px solid $lighter-gray
        border-radius: 50%
        position: relative
        span, i
          display: block
          position: absolute
          left: 50%
          top: 50%
          transform: translate(-50%, -50%)
          line-height: 1em
        i
          color: $white
          display: none
      &--active
        .pasos-b__header__item
          &__tittle
            font-weight: $base-black-font-weight
          &__line-container
            &:before
              background-color: $color-success
          &__dot
            position: relative
            span
              color: $white
      &--before
        .pasos-b__header__item
          &__line-container
            &:before, &:after
              background-color: $color-success
          &__dot
            border-color: $color-success
            background-color: $color-success
            span
              display: none
            i
              display: block
      &:first-child
        .pasos-b__header__item__line-container
          &:before
            background-color: transparent
      &:last-child
        .pasos-b__header__item__line-container
          &:after
            background-color: transparent
    &__btn--left, &__btn--right
      min-width: 50px
      max-width: 50px
      min-height: 50px
      max-height: 50px
      flex: auto
      border-radius: 50%
      border: 2px solid $lighter-gray
      background-color: $white
      position: relative
      cursor: pointer
      transition: all 0.3s ease
      &.is-disabled
        opacity: 0.4
        cursor: not-allowed
        pointer-events: none
      i
        position: absolute
        left: 50%
        top: 50%
        transform: translate(-45%, -45%)
        // color: $lighten-gray
        font-size: 1.3em
        display: block
        line-height: 1em
      &:hover
        border-color: $color-acento-contenido


      &--left, &--right
        @extend .linea-tiempo-c__header__btn


    .horizontal-scroll
      align-items: baseline !important
  @media (max-width: $bp-max-sm)
    &__header
      &__items
        flex-wrap: wrap
        justify-content: center
      &__item
        flex: none
        min-width: 25%
        margin-bottom: 10px
  @media (max-width: $bp-max-xs)
    &__header
      &__btn
        min-width: 30px
        max-width: 30px
        min-height: 30px
        max-height: 30px

  &.color-primario
    .pasos-b__header__item--active
      .pasos-b__header__item__dot
        border-color: $color-primario
        background-color: $color-primario
        span
          color: textColor($color-primario)
  &.color-secundario
    .pasos-b__header__item--active
      .pasos-b__header__item__dot
        border-color: $color-secundario
        background-color: $color-secundario
        span
          color: textColor($color-secundario)
  &.color-acento-contenido
    .pasos-b__header__item--active
      .pasos-b__header__item__dot
        border-color: $color-acento-contenido
        background-color: $color-acento-contenido
        span
          color: textColor($color-acento-contenido)
  &.color-acento-botones
    .pasos-b__header__item--active
      .pasos-b__header__item__dot
        border-color: $color-acento-botones
        background-color: $color-acento-botones
        span
          color: textColor($color-acento-botones)

  .indicador__container
    transform: translateY(15px)