@patreon/studio/module/components/Radio/RadioButton/RadioButton.module.css

Patreon Studio Design System

.label {
  /* CSS variable contracts - defaults */
  --RadioButton-cursor: pointer;
  --RadioButton-alignItems: flex-start;
  --RadioButton-justifyContent: flex-start;
  --RadioButton-flexDirection: row;

  /* Apply the variables */
  align-items: var(--RadioButton-alignItems);
  color: var(--global-content-regular-default);
  cursor: var(--RadioButton-cursor);
  display: flex;
  flex-direction: var(--RadioButton-flexDirection);
  gap: var(--global-space-x16);
  justify-content: var(--RadioButton-justifyContent);
  width: 100%;

  /* Variant: alignLabelCenter */
}

.label.alignLabelCenter {
    --RadioButton-alignItems: center;
  }

/* Variant: alignButtonRight */

.label.alignButtonRight {
    --RadioButton-justifyContent: space-between;
    --RadioButton-flexDirection: row-reverse;
  }

/* Variant: checked */

.label.checked {
    --RadioButton-cursor: default;
  }

/* Variant: disabled */

.label.disabled {
    --RadioButton-cursor: not-allowed;
  }

.content {
  /* CSS variable contracts - defaults */
  --RadioButton-contentOpacity: 1;

  /* Apply the variables */
  opacity: var(--RadioButton-contentOpacity);

  /* Variant: disabled */
}

.disabled .content {
    --RadioButton-contentOpacity: var(--global-opacity-disabled);
  }