.checkbox-preview {
  min-height: 100vh;
  padding: var(--space-page-desktop);
}

.checkbox-preview__shell {
  max-width: 720px;
}

.checkbox-preview__header {
  margin-bottom: var(--space-section-gap);
}

.checkbox-stage {
  display: grid;
  gap: var(--space-element-gap);
  padding: var(--container-padding);
  background: var(--container-background);
  border: var(--container-border);
  border-radius: var(--container-radius);
}

.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-4);
  cursor: pointer;
}

.ds-checkbox__box {
  position: relative;
  display: inline-flex;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-width: var(--checkbox-size);
}

.ds-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--checkbox-background);
  border: var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  transition: var(--checkbox-transition);
  cursor: pointer;
}

.ds-checkbox__input:checked {
  background: var(--checkbox-checked-background);
  border: var(--checkbox-checked-border);
}

.ds-checkbox__mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: 62%;
  color: var(--checkbox-mark-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.ds-checkbox__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--checkbox-mark-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ds-checkbox__input:checked + .ds-checkbox__mark {
  opacity: 1;
}

.ds-checkbox__input:focus-visible {
  outline: none;
  border: var(--input-border-focus);
}

.ds-checkbox__input:disabled {
  background: var(--input-disabled-background);
  border: var(--input-disabled-border);
}

.ds-checkbox__input:disabled + .ds-checkbox__mark {
  color: var(--input-disabled-text);
}

.ds-checkbox:has(.ds-checkbox__input:disabled) {
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
}

.ds-checkbox__box--round {
  width: var(--checkbox-size-round);
  height: var(--checkbox-size-round);
  min-width: var(--checkbox-size-round);
}

.ds-checkbox__input--round {
  border-radius: var(--checkbox-radius-round);
}

@media (max-width: 640px) {
  .checkbox-preview {
    padding: var(--space-page-mobile);
  }
}