$info-icon-diameter: 20px;
$info-icon-diameter--medium: 28px;

.info-icon {

  display: block;
  line-height: 0;

  &:hover,
  &:focus {
    cursor: pointer;
    outline: none;

    .info-icon__svg {
      fill: $color-blue;
    }
  }

  &.is-active {
    .info-icon__svg {
      display: none;
    }

    .info-icon__svg--close {
      display: block;
    }
  }

  &::before {
    font-size: 20px;

    @include media-breakpoint-up(md) {
      font-size: 28px;
    }
  }
}

.info-icon__svg {
  width: $info-icon-diameter;
  height: $info-icon-diameter;

  fill: $color-gray--darker;


  @include media-breakpoint-up(md) {
    width: $info-icon-diameter--medium;
    height: $info-icon-diameter--medium;
  }
}

.info-icon__svg--close {
  display: none;
}

// Copyright AXA Versicherungen AG 2015