/*================ #Icons ================*/
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;

  .supports-no-fontface & {
    display: none;
  }
}

svg,
symbol {
  &.icon:not(.icon--full-color) {
    circle,
    ellipse,
    g,
    line,
    path,
    polygon,
    polyline,
    rect {
      fill: inherit;
      stroke: inherit;
    }
  }

}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.supports-svg .icon__fallback-text {
  @extend .visually-hidden;
}

/*================ Payment Icons ================*/
.payment-icons {
  @include user-select();
  cursor: default;
}

/*================ #Icons ================*/
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;

  .supports-no-svg & {
    display: none;
  }
}

svg,
symbol {
  &.icon:not(.icon--full-color) {
    circle,
    ellipse,
    g,
    line,
    path,
    polygon,
    polyline,
    rect {
      fill: inherit;
      stroke: inherit;
    }
  }

}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.icon__fallback-text {
  @extend .visually-hidden;

  .supports-no-svg & {
    // scss-lint:disable ImportantRule
    position: static !important;
    overflow: inherit;
    clip: none;
    height: auto;
    width: auto;
    margin: 0;
  }
}

/*================ Payment Icons ================*/
.payment-icons {
  @include user-select();
  cursor: default;
}

Update SVG fallback text styles
Update SVG fallback text styles
