/**
 * The wrapper element
 */
.fds-icon {
  fill: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

/**
* The SVG element
 * Render with geometric precision to avoid fuzzy rendering.
 */
.fds-icon svg {
  shape-rendering: geometricprecision;
  width: 100%;
  height: 100%;
}

/**
 * Sketch exports messy masks.
 * We hide all `mask` elements by default.
 */
.fds-icon mask {
  visibility: hidden;
}

/* size variants */
.fds-icon--xs {
  width: var(--media-xs);
  height: var(--media-xs);
}

.fds-icon--s {
  width: var(--media-s);
  height: var(--media-s);
}

.fds-icon--m {
  width: var(--media-m);
  height: var(--media-m);
}

.fds-icon--l {
  width: var(--media-l);
  height: var(--media-l);
}

.fds-icon--xl {
  width: var(--media-xl);
  height: var(--media-xl);
}