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

Patreon Studio Design System

.root {
  align-items: center;
  border: none;
  -moz-column-gap: var(--global-space-x4);
       column-gap: var(--global-space-x4);
  justify-content: center;
  padding: 0;
  transition: var(--global-transition-fast-easing) var(--global-transition-fast-duration);
  width: -moz-fit-content;
  width: fit-content;
}

.root:focus:not(:focus-visible) {
    outline: none;
  }

/* states */
.isDisabled {
  cursor: not-allowed !important;
  opacity: var(--global-opacity-disabled);
}

/* Display */
.displayInline {
  display: inline;
}

.displayInlineFlex {
  display: inline-flex;
}

/* Variants */
.variantPrimary {
  --TextLink-color-default: var(--global-content-primary-default);
  --TextLink-color-hover: var(--global-content-primary-hover);
  --TextLink-color-pressed: var(--global-content-primary-pressed);
}

.variantMuted {
  --TextLink-color-default: var(--global-content-muted-default);
  --TextLink-color-hover: var(--global-content-muted-hover);
  --TextLink-color-pressed: var(--global-content-muted-pressed);
}

.variantNeutral {
  --TextLink-color-default: var(--global-content-regular-default);
  --TextLink-color-hover: var(--global-content-regular-hover);
  --TextLink-color-pressed: var(--global-content-regular-pressed);
}

.variantCritical {
  --TextLink-color-default: var(--global-critical-surface-default);
  --TextLink-color-hover: var(--global-critical-surface-hover);
  --TextLink-color-pressed: var(--global-critical-surface-pressed);
}

.variantWarning {
  --TextLink-color-default: var(--global-warning-surface-default);
  --TextLink-color-hover: var(--global-warning-surface-hover);
  --TextLink-color-pressed: var(--global-warning-surface-pressed);
}

.variantSuccess {
  --TextLink-color-default: var(--global-success-surface-default);
  --TextLink-color-hover: var(--global-success-surface-hover);
  --TextLink-color-pressed: var(--global-success-surface-pressed);
}

.variantRich {
  --TextLink-color-default: var(--global-rich-action-default);
  --TextLink-color-hover: var(--global-rich-action-hover);
  --TextLink-color-pressed: var(--global-rich-action-pressed);
}