@layer shwt-widgets {
  shwt-widget-form-checkbox {
    --checkboxMarkCheckmark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,11 8,15 16,5'/></svg>");
    --checkboxMarkX: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><line x1='5' y1='5' x2='15' y2='15'/><line x1='15' y1='5' x2='5' y2='15'/></svg>");
  }

  shwt-widget-form-checkbox .shwt-form-field-wrapper {
    display: flex;
    flex-direction: var(--labelDirection, column);
    align-items: flex-start;
    gap: var(--labelGap, 10px);
  }

  shwt-widget-form-checkbox[labelposition="inline"] .shwt-form-field-wrapper {
    flex-direction: var(--labelDirection, row);
  }

  shwt-widget-form-checkbox .shwt-form-field-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  shwt-widget-form-checkbox input {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    order: var(--checkboxOrder, 0);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    background: var(--_bgColor);
    border-color: var(--_borderColor);
    border-style: var(--_borderStyle);
    border-width: var(--_borderWidth);
    border-radius: var(--_borderRadius);
    box-shadow: var(--_shadowX) var(--_shadowY) var(--_shadowBlur) var(--_shadowColor), inset var(--_innerShadowX) var(--_innerShadowY) var(--_innerShadowBlur) var(--_innerShadowColor);
    color: var(--_inputColor);
  }

  shwt-widget-form-checkbox[labelposition="inline"] input {
    order: var(--checkboxOrder, -1);
  }

  shwt-widget-form-checkbox input:checked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    mask-image: var(--checkboxMark, var(--checkboxMarkCheckmark));
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  shwt-widget-form-checkbox[checkboxstyle="x"] input:checked::before {
    mask-image: var(--checkboxMark, var(--checkboxMarkX));
  }
}