.icon__toggler {

  &:focus {
    outline: auto;
  }

  &,
  &:hover,
  &:active {
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 0;
    line-height: inherit;
    min-width: 0;
    padding: 0;
    outline: none;
  }

  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;
    }
  }
}