.icon__toggler {
  @extend .button--icon-only;
  cursor: pointer;
  display: inline-block;
  position: relative;

  .icon {
    display: inline-block;
    opacity: 1;
    position: relative;
    transition: opacity $transition-duration;

    & + .icon {
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
    }
  }

  svg {
    left: 0;
    position: absolute;
    top: 0;
  }

  &:hover svg {
    transition: fill $transition-duration;
  }

  // active
  &--active {
    .icon {
      opacity: 0;
    }

    .icon + .icon {
      opacity: 1;
    }
  }
}
