$base-class: "collapse-icon";

.#{$base-class} {
  display: inline-block;
  flex-shrink: 0;
  user-select: none;
  fill: currentColor;

  path {
    transform-box: fill-box;
    transform-origin: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
  }

  &__bottom-arrow {
    transform: rotate(0);
  }

  &__top-arrow {
    transform: rotate(0);
  }

  &--expanded {
    .#{$base-class}__bottom-arrow {
      transform: rotate(-180deg);
    }

    .#{$base-class}__top-arrow {
      transform: rotate(180deg);
    }
  }
}