:root {
  --tinyIconSize: 13px;
  --tiniestIconSize: 12px;
  --extraSmallIconSize: 16px;
  --smallIconSize: 24px;
  --mediumIconSize: 32px;
  --largeIconSize: 48px;
  --giantIconSize: 64px;
  --massiveIconSize: 128px;
}

icon {
  display: block;
  mask-size: calc(0.75 * var(--smallIconSize)) calc(0.75 * var(--smallIconSize));
  background-color: hsl(var(--appBackgroundLightestHSL));
  width: var(--smallIconSize);
  height: var(--smallIconSize);
  -webkit-mask-size: calc(0.75 * var(--smallIconSize)) calc(0.75 * var(--smallIconSize));
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

icon.tiny {
  mask-size: calc(1 * var(--tinyIconSize)) calc(1 * var(--tinyIconSize));
  width: var(--tinyIconSize);
  height: var(--tinyIconSize);
  -webkit-mask-size: calc(1 * var(--tinyIconSize)) calc(1 * var(--tinyIconSize));
}

icon.extrasmall {
  mask-size: calc(1 * var(--extraSmallIconSize)) calc(1 * var(--extraSmallIconSize));
  width: var(--extraSmallIconSize);
  height: var(--extraSmallIconSize);
  -webkit-mask-size: calc(1 * var(--extraSmallIconSize)) calc(1 * var(--extraSmallIconSize));
}

icon.medium {
  mask-size: calc(0.75 * var(--mediumIconSize)) calc(0.75 * var(--mediumIconSize));
  width: var(--mediumIconSize);
  height: var(--mediumIconSize);
  -webkit-mask-size: calc(0.75 * var(--mediumIconSize)) calc(0.75 * var(--mediumIconSize));
}

icon.large {
  mask-size: calc(0.75 * var(--largeIconSize)) calc(0.75 * var(--largeIconSize));
  width: var(--largeIconSize);
  height: var(--largeIconSize);
  -webkit-mask-size: calc(0.75 * var(--largeIconSize)) calc(0.75 * var(--largeIconSize));
}

icon.giant,
icon.logo.giant {
  mask-size: var(--giantIconSize) var(--giantIconSize);
  width: var(--giantIconSize);
  height: var(--giantIconSize);
  -webkit-mask-size: var(--giantIconSize) var(--giantIconSize);
}

icon.empty {
  background: none;
}

icon.emoji {
  margin: 0;
  background-color: none;
  padding: 0;
  width: auto;
  height: auto;
  line-height: inherit;
}

icon.logo {
  mask-size: var(--largeIconSize) var(--largeIconSize);
  background-color: hsl(var(--appForegroundHSL));
  width: var(--largeIconSize);
  height: var(--largeIconSize);
  -webkit-mask-size: var(--largeIconSize) var(--largeIconSize);
  mask-image: url(/images/logo-facets.svg);
  -webkit-mask-image: url(/images/logo-facets.svg);
}

icon.share {
  mask-image: url(/images/icon-share.svg);
  -webkit-mask-image: url(/images/icon-share.svg);
}

icon.eye {
  mask-image: url(/images/icon-eye.svg);
  -webkit-mask-image: url(/images/icon-eye.svg);
}

icon.copy {
  mask-image: url(/images/icon-copy.svg);
  -webkit-mask-image: url(/images/icon-copy.svg);
}

icon.reset {
  mask-image: url(/images/icon-reset.svg);
  -webkit-mask-image: url(/images/icon-reset.svg);
}

icon.stats {
  mask-image: url(/images/icon-stats.svg);
  -webkit-mask-image: url(/images/icon-stats.svg);
}

icon.invite {
  mask-image: url(/images/icon-invite.svg);
  -webkit-mask-image: url(/images/icon-invite.svg);
}

icon.logout {
  mask-image: url(/images/icon-logout.svg);
  -webkit-mask-image: url(/images/icon-logout.svg);
}

icon.chevronleft {
  mask-image: url(/images/icon-chevron-left.svg);
  -webkit-mask-image: url(/images/icon-chevron-left.svg);
}

icon.chevronright {
  mask-image: url(/images/icon-chevron-right.svg);
  -webkit-mask-image: url(/images/icon-chevron-right.svg);
}

icon.alert {
  mask-image: url(/images/icon-alert.svg);
  -webkit-mask-image: url(/images/icon-alert.svg);
}

icon.download {
  mask-image: url(/images/icon-download.svg);
  -webkit-mask-image: url(/images/icon-download.svg);
}

icon.bmc {
  mask-image: url(/images/icon-bmc.svg);
  -webkit-mask-image: url(/images/icon-bmc.svg);
}

icon.like {
  mask-image: url(/images/icon-like.svg);
  -webkit-mask-image: url(/images/icon-like.svg);
}

icon.meeples {
  mask-image: url(/images/icon-meeples.svg);
  -webkit-mask-image: url(/images/icon-meeples.svg);
}

icon.credits {
  mask-image: url(/images/icon-credits.svg);
  -webkit-mask-image: url(/images/icon-credits.svg);
}

icon.discord {
  mask-image: url(/images/logo-discord.svg);
  -webkit-mask-image: url(/images/logo-discord.svg);
}

icon.feedback {
  mask-image: url(/images/icon-feedback.svg);
  -webkit-mask-image: url(/images/icon-feedback.svg);
}

icon.globe {
  mask-image: url(/images/icon-globe.svg);
  -webkit-mask-image: url(/images/icon-globe.svg);
}

icon.gradcap {
  mask-image: url(/images/icon-gradcap.svg);
  -webkit-mask-image: url(/images/icon-gradcap.svg);
}

icon.anon {
  mask-image: url(/images/icon-anon.svg);
  -webkit-mask-image: url(/images/icon-anon.svg);
}

icon.manage {
  mask-image: url(/images/icon-manage.svg);
  -webkit-mask-image: url(/images/icon-manage.svg);
}

icon.edit {
  mask-image: url(/images/icon-edit.svg);
  -webkit-mask-image: url(/images/icon-edit.svg);
}

icon.create {
  mask-image: url(/images/icon-create.svg);
  -webkit-mask-image: url(/images/icon-create.svg);
}

icon.info {
  mask-image: url(/images/icon-info.svg);
  -webkit-mask-image: url(/images/icon-info.svg);
}

icon.add {
  mask-image: url(/images/icon-add.svg);
  -webkit-mask-image: url(/images/icon-add.svg);
}

icon.delete {
  mask-image: url(/images/icon-delete.svg);
  -webkit-mask-image: url(/images/icon-delete.svg);
}

icon.inprogress {
  mask-image: url(/images/icon-in-progress.svg);
  -webkit-mask-image: url(/images/icon-in-progress.svg);
}

icon.profile {
  mask-image: url(/images/icon-profile.svg);
  -webkit-mask-image: url(/images/icon-profile.svg);
}

icon.recycle {
  mask-image: url(/images/icon-recycle.svg);
  -webkit-mask-image: url(/images/icon-recycle.svg);
}

icon.check {
  mask-image: url(/images/icon-check.svg);
  -webkit-mask-image: url(/images/icon-check.svg);
}

icon.play {
  mask-image: url(/images/icon-play.svg);
  -webkit-mask-image: url(/images/icon-play.svg);
}

icon.continue {
  mask-image: url(/images/icon-chevron-right.svg);
  -webkit-mask-image: url(/images/icon-chevron-right.svg);
}

icon.undo {
  mask-image: url(/images/icon-undo.svg);
  -webkit-mask-image: url(/images/icon-undo.svg);
}

icon.nope {
  mask-image: url(/images/icon-x.svg);
  -webkit-mask-image: url(/images/icon-x.svg);
}

icon.trash {
  mask-image: url(/images/icon-trash.svg);
  -webkit-mask-image: url(/images/icon-trash.svg);
}

icon.quit {
  mask-image: url(/images/icon-quit.svg);
  -webkit-mask-image: url(/images/icon-quit.svg);
}

icon.rotate {
  mask-image: url(/images/icon-rotatearrow.svg);
  -webkit-mask-image: url(/images/icon-rotatearrow.svg);
}

icon.expand {
  mask-image: url(/images/icon-expand.svg);
  -webkit-mask-image: url(/images/icon-expand.svg);
}

icon.contract {
  mask-image: url(/images/icon-contract.svg);
  -webkit-mask-image: url(/images/icon-contract.svg);
}

icon.settings {
  mask-image: url(/images/icon-settings.svg);
  -webkit-mask-image: url(/images/icon-settings.svg);
}

icon.spinner {
  mask-image: url(/images/icon-spinner.svg);
  -webkit-mask-image: url(/images/icon-spinner.svg);
}

icon.logo {
  mask-image: url(/images/logo-facets.svg);
  -webkit-mask-image: url(/images/logo-facets.svg);
}