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

Patreon Studio Design System

.root {
  --Checkbox-unchecked-backgroundColorDefault: var(--global-bg-base-default);
  --Checkbox-unchecked-backgroundColorHover: var(--global-bg-base-hover);
  --Checkbox-unchecked-backgroundColorPressed: var(--global-bg-base-pressed);
  --Checkbox-unchecked-borderDefault: var(--global-borderWidth-thin) solid var(--global-border-strong-default);
  --Checkbox-unchecked-borderHover: var(--global-borderWidth-thin) solid var(--global-border-strong-hover);
  --Checkbox-unchecked-borderPressed: var(--global-borderWidth-thin) solid var(--global-border-strong-pressed);
  --Checkbox-checked-backgroundColorDefault: var(--global-control-surface-default);
  --Checkbox-checked-backgroundColorHover: var(--global-control-surface-hover);
  --Checkbox-checked-backgroundColorPressed: var(--global-control-surface-pressed);
  --Checkbox-checked-iconColor: var(--global-control-action-default);

  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: var(--Checkbox-gap);
}

.root.labelPositionLeft {
    flex-direction: row-reverse;
  }

.root.disabled {
    --Checkbox-unchecked-borderDefault: var(--global-borderWidth-thin) solid var(--global-border-muted-default);

    cursor: default;
    opacity: var(--global-opacity-disabled);
  }

.sizeSm {
  --Checkbox-gap: var(--global-space-x12);
  --Checkbox-padding: 12px;
  --Checkbox-dimensions: 16px;
}

.sizeMd {
  --Checkbox-gap: var(--global-space-x16);
  --Checkbox-padding: 16px;
  --Checkbox-dimensions: 20px;
}

.sizeLg {
  --Checkbox-gap: var(--global-space-x20);
  --Checkbox-padding: 20px;
  --Checkbox-dimensions: 24px;
}

.checkboxContainer {
  position: relative;
}

.checkbox {
  display: block;
  height: var(--Checkbox-dimensions);
  margin: 2px;
  opacity: 0;
  position: absolute;
  width: var(--Checkbox-dimensions);
}

.syntheticCheckbox {
  --Checkbox-backgroundColor: var(--Checkbox-unchecked-backgroundColorDefault);
  --Checkbox-border: var(--Checkbox-unchecked-borderDefault);

  align-items: center;
  background-color: var(--Checkbox-backgroundColor);
  border: var(--Checkbox-border);
  border-radius: var(--global-radius-sm);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  height: var(--Checkbox-dimensions);
  justify-content: center;
  margin: 2px;
  min-height: var(--Checkbox-dimensions);
  min-width: var(--Checkbox-dimensions);
  padding: 2px;
  position: relative;
  width: var(--Checkbox-dimensions);
}

.syntheticCheckbox svg {
    color: var(--Checkbox-checked-iconColor);
    height: 100%;
    width: 100%;
  }

/* Focus states */

.checkbox:focus + .syntheticCheckbox {
    outline: none;
  }

.checkbox:focus-visible + .syntheticCheckbox {
    /* Firefox default outline color */
    /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for firefox */
    outline: solid Highlight;

    /* Chrome/Safari default outline color */
    /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for safari */
    outline: -webkit-focus-ring-color auto;
  }

/* Disabled state */

.checkbox:disabled + .syntheticCheckbox {
    cursor: default;
  }

/* Checked/indeterminate state */

.checkbox:checked + .syntheticCheckbox,.checkbox:indeterminate + .syntheticCheckbox {
    --Checkbox-backgroundColor: var(--Checkbox-checked-backgroundColorDefault);
    --Checkbox-border: none;
  }

.checkbox:checked:focus-visible + .syntheticCheckbox,.checkbox:indeterminate:focus-visible + .syntheticCheckbox {
    outline-offset: 2px;
  }

.checkbox:not(:checked):focus-visible + .syntheticCheckbox {
    outline-offset: var(--global-space-x4);
  }

/* Hover state for enabled checkboxes */

.checkbox:enabled:hover + .syntheticCheckbox {
    --Checkbox-backgroundColor: var(--Checkbox-unchecked-backgroundColorHover);
    --Checkbox-border: var(--Checkbox-unchecked-borderHover);
  }

/* Active state for enabled checkboxes */

.checkbox:enabled:active + .syntheticCheckbox {
    --Checkbox-backgroundColor: var(--Checkbox-unchecked-backgroundColorPressed);
    --Checkbox-border: var(--Checkbox-unchecked-borderPressed);
  }

/* Hover state for checked/indeterminate enabled checkboxes */

.checkbox:enabled:checked:hover + .syntheticCheckbox,.checkbox:enabled:indeterminate:hover + .syntheticCheckbox {
    --Checkbox-backgroundColor: var(--Checkbox-checked-backgroundColorHover);
    --Checkbox-border: none;
  }

/* Active state for checked/indeterminate enabled checkboxes */

.checkbox:enabled:checked:active + .syntheticCheckbox,.checkbox:enabled:indeterminate:active + .syntheticCheckbox {
    --Checkbox-backgroundColor: var(--Checkbox-checked-backgroundColorPressed);
    --Checkbox-border: none;
  }

.labelContainer {
  margin: auto 0;
}

.labelContainer .elementContainer {
    display: inline-flex;
  }