.acordion
  position: relative

  &__header
    display: flex
    align-items: center
    margin-bottom: 25px
    cursor: pointer
    justify-content: space-between

  &__accion
    &__btn
      &--a, &--b
        width: 40px
        height: 40px
        border-radius: 50%
        position: relative

        i
          position: absolute
          top: 50%
          left: 50%
          transform: translate(-50%,-50%)


      &--a
        background-color: $white
        box-shadow: 0px 3px 5px 0px rgba($color-sistema-a,0.3)

      &--b
        border: 1px solid $color-sistema-a

  &__titulo

  &__contenido
    overflow: hidden
    transition: height 0.5s ease-in-out

  .indicador__container
    transform: translateY(15px)
  
  &.color-primario
    .acordion__accion__btn--a, .acordion__accion__btn--b
      background-color: $color-primario
      border-color: $color-primario

  &.color-secundario
    .acordion__accion__btn--a, .acordion__accion__btn--b
      background-color: $color-secundario
      border-color: $color-secundario

  &.color-acento-contenido
    .acordion__accion__btn--a, .acordion__accion__btn--b
      background-color: $color-acento-contenido
      border-color: $color-acento-contenido

  &.color-acento-botones
    .acordion__accion__btn--a, .acordion__accion__btn--b
      background-color: $color-acento-botones
      border-color: $color-acento-botones