/* ==========================================================================
   Icon.
   ========================================================================== */
.icon {
  display: inline-block;
  --icon-size: var(--icon-size-m);
  width: var(--icon-size);
  height: var(--icon-size);

  &:before {
    content: "";
    display: inline-block;
    width: inherit;
    height: inherit;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: var(--icon-size);
    background: var(--color-fg);
    transition: var(--transition);
  }

  /* Layout.
     ========================================================================== */
  &.icon--inline {
    display: flex;
    float: left;
    margin-right: var(--space-l);
  }

  /* Sizes.
     ========================================================================== */
  &.icon-size--small {
    --icon-size: var(--icon-size-s);
  }
  &.icon-size--normal {
    --icon-size: var(--icon-size-m);
  }
  &.icon-size--medium {
    --icon-size: var(--icon-size-l);
  }
  &.icon-size--big {
    --icon-size: var(--icon-size-xl);
  }
}

.btn.icon,
p.icon {
  &:before {
    margin-right: .6em;
  }
}

.icon--inline {
  display: flex;
  float: left;
  margin-right: var(--space-l);
}

/* Sizes.
   ========================================================================== */
.icon-size--small {
  --icon-size: var(--icon-size-s);
}
.icon-size--normal {
  --icon-size: var(--icon-size-m);
}
.icon-size--medium {
  --icon-size: var(--icon-size-l);
}
.icon-size--big {
  --icon-size: var(--icon-size-xl);
}

/* List.
   ========================================================================== */
.icon--datagone.icon--angle-bottom:before {
  mask-image: var(--icon-datagone-angle-bottom);
}
.icon--datagone.icon--arrow-bottom:before {
  mask-image: var(--icon-datagone-arrow-bottom);
}
.icon--datagone.icon--arrow-left:before {
  mask-image: var(--icon-datagone-arrow-left);
}
.icon--datagone.icon--arrow-long-left:before {
  mask-image: var(--icon-datagone-arrow-long-left);
}
.icon--datagone.icon--arrow-long-right:before {
  mask-image: var(--icon-datagone-arrow-long-right);
}
.icon--datagone.icon--arrow-long-right-sidebar:before {
  mask-image: var(--icon-datagone-arrow-long-right-sidebar);
}
.icon--datagone.icon--arrow-right:before {
  mask-image: var(--icon-datagone-arrow-right);
}
.icon--datagone.icon--arrow-top:before {
  mask-image: var(--icon-datagone-arrow-top);
}
.icon--datagone.icon--bell:before {
  mask-image: var(--icon-datagone-bell);
}
.icon--datagone.icon--checkbox:before {
  mask-image: var(--icon-datagone-checkbox);
}
.icon--datagone.icon--circle:before {
  mask-image: var(--icon-datagone-circle);
}
.icon--datagone.icon--close:before {
  mask-image: var(--icon-datagone-close);
}
.icon--datagone.icon--code:before {
  mask-image: var(--icon-datagone-code);
}
.icon--datagone.icon--comments:before {
  mask-image: var(--icon-datagone-comments);
}
.icon--datagone.icon--contact:before {
  mask-image: var(--icon-datagone-contact);
}
.icon--datagone.icon--download:before {
  mask-image: var(--icon-datagone-download);
}
.icon--datagone.icon--edit:before {
  mask-image: var(--icon-datagone-edit);
}
.icon--datagone.icon--expand:before {
  mask-image: var(--icon-datagone-expand);
}
.icon--datagone.icon--export:before {
  mask-image: var(--icon-datagone-export);
}
.icon--datagone.icon--facebook:before {
  mask-image: var(--icon-datagone-facebook);
}
.icon--datagone.icon--file-add:before {
  mask-image: var(--icon-datagone-file-add);
}
.icon--datagone.icon--file-chart:before {
  mask-image: var(--icon-datagone-file-chart);
}
.icon--datagone.icon--file-download:before {
  mask-image: var(--icon-datagone-file-download);
}
.icon--datagone.icon--file-transfer:before {
  mask-image: var(--icon-datagone-file-transfer);
}
.icon--datagone.icon--fullscreen:before {
  mask-image: var(--icon-datagone-fullscreen);
}
.icon--datagone.icon--grid:before {
  mask-image: var(--icon-datagone-grid);
}
.icon--datagone.icon--image:before {
  mask-image: var(--icon-datagone-image);
}
.icon--datagone.icon--layout:before {
  mask-image: var(--icon-datagone-layout);
}
.icon--datagone.icon--linkedin:before {
  mask-image: var(--icon-datagone-linkedin);
}
.icon--datagone.icon--list:before {
  mask-image: var(--icon-datagone-list);
}
.icon--datagone.icon--location:before {
  mask-image: var(--icon-datagone-location);
}
.icon--datagone.icon--minus:before {
  mask-image: var(--icon-datagone-minus);
}
.icon--datagone.icon--phone:before {
  mask-image: var(--icon-datagone-phone);
}
.icon--datagone.icon--play:before {
  mask-image: var(--icon-datagone-play);
}
.icon--datagone.icon--plus:before {
  mask-image: var(--icon-datagone-plus);
}
.icon--datagone.icon--print:before {
  mask-image: var(--icon-datagone-print);
}
.icon--datagone.icon--printer:before {
  mask-image: var(--icon-datagone-printer);
}
.icon--datagone.icon--row-add:before {
  mask-image: var(--icon-datagone-row-add);
}
.icon--datagone.icon--row-remove:before {
  mask-image: var(--icon-datagone-row-remove);
}
.icon--datagone.icon--search:before {
  mask-image: var(--icon-datagone-search);
}
.icon--datagone.icon--share:before {
  mask-image: var(--icon-datagone-share);
}
.icon--datagone.icon--skew:before {
  mask-image: var(--icon-datagone-skew);
}
.icon--datagone.icon--thread:before {
  mask-image: var(--icon-datagone-thread);
}
.icon--datagone.icon--ticket:before {
  mask-image: var(--icon-datagone-ticket);
}
.icon--datagone.icon--todo:before {
  mask-image: var(--icon-datagone-todo);
}
.icon--datagone.icon--twitter:before {
  mask-image: var(--icon-datagone-twitter-x);
}
.icon--datagone.icon--user:before {
  mask-image: var(--icon-datagone-user);
}
.icon--datagone.icon--view:before {
  mask-image: var(--icon-datagone-view);
}