.bz-collapsible, .bz-collapsible[dir=ltr] {
  .bz-collapsible__header {
    background-color: rgba($bz-theme-100, .25);
    border-bottom: 1px solid $bz-theme-400;
    color: $bz-neutral-600;
    font-size: $bz-font-size-body;
    margin: 0;
    min-height: 25px;
    padding: $bz-space-inset-m;
    padding-right: $bz-space-inset-m * 3;
    position: relative;
    width: 100%;
  }

  .bz-collapsible__header > svg {
    fill: $bz-theme-400;
    left: initial;
    margin-top: -16px;
    padding: $bz-space-inset-s; // porque el icono es de 32
    position: absolute;
    right: $bz-space-inset-s;
    top: 50%;
    transition: transform .26s ease;
  }

  .bz-collapsible__content {
    border-bottom: 1px solid $bz-neutral-300;
    max-height: 100000px;
    overflow: hidden;
    transition: max-height .26s ease-in, opacity .26s linear;
  }

  &.bz-collapsible--collapsed .bz-collapsible__content {
    max-height: 0;
    opacity: 0;
    transition: max-height .26s cubic-bezier(0, .98, .58, 1), opacity .26s linear;
  }

  &.bz-collapsible--collapsed .bz-collapsible__header {
    background-color: $bz-neutral-100;
    border-bottom: 1px solid $bz-neutral-300;
  }

  &.bz-collapsible--collapsed > .bz-collapsible__header > svg {
    fill: $bz-neutral-400;
    transform: rotate(-180deg);
  }
}

[dir=rtl] .bz-collapsible,
.bz-collapsible[dir=rtl] {
  .bz-collapsible__header {
    padding-left: $bz-space-inset-m * 3;
    padding-right: $bz-space-inset-m;
  }

  .bz-collapsible__header > svg {
    left: $bz-space-inset-s;
    right: initial;
  }

  &.bz-collapsible--collapsed > .bz-collapsible__header > svg {
    transform: rotate(180deg);
  }
}