@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;
  }
}