@patreon/studio/module/components/Icon/Icon.module.css

Patreon Studio Design System

.root {
  display: inline-block;
}

.root svg {
    display: block;
    fill: currentcolor;
    height: var(--Icon-size);
    width: var(--Icon-size);
  }

.highlight {
  align-items: center;
  background-color: currentcolor;
  border-radius: var(--global-radius-circle);
  display: inline-flex;
  height: var(--HighlightSize-value);
  justify-content: center;
  width: var(--HighlightSize-value)
}

.sizePx8 { --Icon-size: 8px; }

.sizePx10 { --Icon-size: 10px; }

.sizePx12 { --Icon-size: 12px; }

.sizePx16 { --Icon-size: 16px; }

.sizePx20 { --Icon-size: 20px; }

.sizePx24 { --Icon-size: 24px; }

.sizePx32 { --Icon-size: 32px; }

.sizePx40 { --Icon-size: 40px; }

.sizePx48 { --Icon-size: 48px; }

.sizePx64 { --Icon-size: 64px; }

.sizePx88 { --Icon-size: 88px; }

.verticalAlignBaseline { vertical-align: baseline; }
.verticalAlignSub { vertical-align: sub; }
.verticalAlignSuper { vertical-align: super; }
.verticalAlignTextTop { vertical-align: text-top; }
.verticalAlignTextBottom { vertical-align: text-bottom; }
.verticalAlignMiddle { vertical-align: middle; }
.verticalAlignTop { vertical-align: top; }
.verticalAlignBottom { vertical-align: bottom; }
@media (min-width: 588px) {

  .sizePx8BreakpointSm { --Icon-size: 8px;
  }

  .sizePx10BreakpointSm { --Icon-size: 10px;
  }

  .sizePx12BreakpointSm { --Icon-size: 12px;
  }

  .sizePx16BreakpointSm { --Icon-size: 16px;
  }

  .sizePx20BreakpointSm { --Icon-size: 20px;
  }

  .sizePx24BreakpointSm { --Icon-size: 24px;
  }

  .sizePx32BreakpointSm { --Icon-size: 32px;
  }

  .sizePx40BreakpointSm { --Icon-size: 40px;
  }

  .sizePx48BreakpointSm { --Icon-size: 48px;
  }

  .sizePx64BreakpointSm { --Icon-size: 64px;
  }

  .sizePx88BreakpointSm { --Icon-size: 88px;
  }
}
@media (min-width: 796px) {

  .sizePx8BreakpointMd { --Icon-size: 8px;
  }

  .sizePx10BreakpointMd { --Icon-size: 10px;
  }

  .sizePx12BreakpointMd { --Icon-size: 12px;
  }

  .sizePx16BreakpointMd { --Icon-size: 16px;
  }

  .sizePx20BreakpointMd { --Icon-size: 20px;
  }

  .sizePx24BreakpointMd { --Icon-size: 24px;
  }

  .sizePx32BreakpointMd { --Icon-size: 32px;
  }

  .sizePx40BreakpointMd { --Icon-size: 40px;
  }

  .sizePx48BreakpointMd { --Icon-size: 48px;
  }

  .sizePx64BreakpointMd { --Icon-size: 64px;
  }

  .sizePx88BreakpointMd { --Icon-size: 88px;
  }
}
@media (min-width: 978px) {

  .sizePx8BreakpointLg { --Icon-size: 8px;
  }

  .sizePx10BreakpointLg { --Icon-size: 10px;
  }

  .sizePx12BreakpointLg { --Icon-size: 12px;
  }

  .sizePx16BreakpointLg { --Icon-size: 16px;
  }

  .sizePx20BreakpointLg { --Icon-size: 20px;
  }

  .sizePx24BreakpointLg { --Icon-size: 24px;
  }

  .sizePx32BreakpointLg { --Icon-size: 32px;
  }

  .sizePx40BreakpointLg { --Icon-size: 40px;
  }

  .sizePx48BreakpointLg { --Icon-size: 48px;
  }

  .sizePx64BreakpointLg { --Icon-size: 64px;
  }

  .sizePx88BreakpointLg { --Icon-size: 88px;
  }
}
@media (min-width: 1280px) {

  .sizePx8BreakpointXl { --Icon-size: 8px;
  }

  .sizePx10BreakpointXl { --Icon-size: 10px;
  }

  .sizePx12BreakpointXl { --Icon-size: 12px;
  }

  .sizePx16BreakpointXl { --Icon-size: 16px;
  }

  .sizePx20BreakpointXl { --Icon-size: 20px;
  }

  .sizePx24BreakpointXl { --Icon-size: 24px;
  }

  .sizePx32BreakpointXl { --Icon-size: 32px;
  }

  .sizePx40BreakpointXl { --Icon-size: 40px;
  }

  .sizePx48BreakpointXl { --Icon-size: 48px;
  }

  .sizePx64BreakpointXl { --Icon-size: 64px;
  }

  .sizePx88BreakpointXl { --Icon-size: 88px;
  }
}
@media (min-width: 1440px) {

  .sizePx8BreakpointXxl { --Icon-size: 8px;
  }

  .sizePx10BreakpointXxl { --Icon-size: 10px;
  }

  .sizePx12BreakpointXxl { --Icon-size: 12px;
  }

  .sizePx16BreakpointXxl { --Icon-size: 16px;
  }

  .sizePx20BreakpointXxl { --Icon-size: 20px;
  }

  .sizePx24BreakpointXxl { --Icon-size: 24px;
  }

  .sizePx32BreakpointXxl { --Icon-size: 32px;
  }

  .sizePx40BreakpointXxl { --Icon-size: 40px;
  }

  .sizePx48BreakpointXxl { --Icon-size: 48px;
  }

  .sizePx64BreakpointXxl { --Icon-size: 64px;
  }

  .sizePx88BreakpointXxl { --Icon-size: 88px;
  }
}