.collapsible {
  &__button {
    height: 20px;
    position: absolute;
    right: 0;
    top: $baseline * 1.9;
    width: 20px;

    &::before,
    &::after {
      background: $color-brand--one;
      border-radius: 4px;
      content: ' ';
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      transition: opacity $transition-duration, transform $transition-duration;
      top: $baseline * 0.9;
      transform-origin: 50%;
      width: 20px;
    }
    // horizontal line
    &::before {
      transform: rotate(90deg);
    }
  }

  &__trigger .icon {
    transition: all 0.2s ease-in-out;
  }

  &__trigger.icon__toggler--active .icon {
    opacity: 1; //undo nested styling "icon__toggler--active .icon"
    transform: rotate(-180deg);
  }

  &__content {
    @include transition(max-height, $transition-duration);
    max-height: 0;
    overflow: hidden;
  }
}

.collapsible__trigger--expanded + .collapsible__content {
  max-height: none;
}

@include collapsible-background-mapping;

// viewport l
@include viewport--l {
  .collapsible__button::before,
  .collapsible__button::after {
    top: $baseline * 1.3;
  }
}

// trigger
.collapsible__trigger {
  cursor: pointer;
  position: relative;

  &--expanded .collapsible__button {
    &::before,
    &::after {
      transition: opacity $transition-duration--fast,
        transform $transition-duration;
    }

    &::before {
      transform: rotate(180deg);
    }

    &::after {
      opacity: 0;
      transform: rotate(90deg);
    }
  }
  // inactive trigger
  &--inactive {
    pointer-events: none;

    .link-list__link {
      cursor: default;
    }

    .collapsible__button {
      display: none;
    }
  }
}

// collapsible item expanded by default
[data-rs-collapsible-expanded] {
  &.collapsible__trigger--expanded .collapsible__button {
    opacity: 1;
  }

  .collapsible__button {
    opacity: 0;

    &::before,
    &::after {
      transition: none;
    }
  }

  & + .collapsible__content {
    max-height: none;
  }
}