.toggable-group {
  align-items: center;
  display: flex;

  &__item {
    align-items: center;
    cursor: pointer;
    display: flex;
    transition: color $transition-duration--fast;

    & + & {
      margin-left: 20px;
    }

    span {
      position: relative; // fix IE 10/11 text jump in active button
    }

    .icon {
      margin-right: 5px;

      &:hover {
        color: inherit;
      }
    }

    svg {
      transition: fill $transition-duration--fast;
    }

    &--active {
      color: $color-brand--one;
      cursor: default;
    }

    &--active .icon svg {
      fill: $color-brand--one;
    }
  }
}

@include toggable-group-background-mapping;