/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-checkbox {
  /**
    @prop --cb-border-color:
      Default border color
      - default: var(--input-border-color)
  */
  --cb-border-color: var(--input-border-color);
  /**
    @prop --cb-border-width:
      Default border width
      - default: 2px
  */
  --cb-border-width: 0.125rem;
  /**
    @prop --cb-border:
      Checkbox default border
      - default: var(--cb-border-width) solid var(--cb-border-color)
  */
  --cb-border: var(--cb-border-width) solid var(--cb-border-color);
  /**
    @prop --cb-border-color-hover:
      Checkbox hover state color
      - default: var(--go-color-neutral-700)
  */
  --cb-border-color-hover: var(--go-color-neutral-700);
  /**
    @prop --cb-size:
      Size of checkbox
      - default: 1.5rem
  */
  --cb-size: 1.5rem;
  /**
    @prop --cb-radius:
      Checkbox border radius
      - default: var(--input-radius)
  */
  --cb-radius: var(--input-radius);
  /**
    @prop --cb-checked-bg:
      Checkbox background color when checked
      - default: var(--control-selected-bg-color)
  */
  --cb-checked-bg: var(--control-selected-bg-color);
  /**
    @prop --cb-checked-text:
      Foreground color of checked checkbox
      - default: var(--control-selected-fg-color)
  */
  --cb-checked-text: var(--control-selected-fg-color);
  /**:
      drop shadow for selected mark
      - default: 1px 1px 2px rgba(0, 0, 0, 0.4)
  */
  --cb-mark-shadow-inner: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.4);
}
go-checkbox .control-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--input-gap-inner);
}
go-checkbox input,
go-checkbox label {
  cursor: pointer;
}
go-checkbox[error] {
  color: var(--input-error-color);
  --input-hint-color: var(--input-error-color);
  --cb-border-color: var(--input-error-color);
}
go-checkbox[error] .control {
  --input-border-color: var(--input-error-color);
  border-color: var(--input-error-color);
}
go-checkbox[error] input:checked ~ .mark {
  --cb-checked-bg: var(--input-error-color);
}
go-checkbox[error] .error-msg {
  margin: var(--input-gap-inner) 0;
}
go-checkbox[disabled] input,
go-checkbox[disabled] label {
  cursor: not-allowed;
}
go-checkbox[disabled] .box .mark {
  background: var(--input-bg-disabled-color);
  stroke: var(--input-text-disabled-color);
  border-color: var(--input-text-disabled-color);
}
go-checkbox label {
  margin: 0;
  font-size: var(--go-size-0);
  font-weight: 400;
  line-height: 1.5;
  line-height: var(--cb-size);
}
go-checkbox label ~ .hint {
  margin-top: 0.25rem;
}
go-checkbox :where(.box) {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  width: var(--cb-size);
  height: var(--cb-size);
}
go-checkbox :where(.box) .mark {
  display: block;
  stroke: var(--cb-checked-text);
  border: var(--cb-border);
  border-radius: var(--cb-radius);
  stroke-dasharray: 24;
  stroke-dashoffset: -24;
  transition: background-color var(--go-duration-fast) ease var(--go-duration-fast), stroke-dashoffset var(--go-duration-fast) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-checkbox :where(.box) .mark {
    transition-duration: 0s;
  }
}
go-checkbox :where(.box) input ~ .mark.minus {
  display: none;
}
go-checkbox :where(.box) input:checked ~ .mark {
  transition: background-color var(--go-duration-fast) var(--go-timing-function), stroke-dashoffset var(--go-duration-fast) ease var(--go-duration-fast);
  stroke-dashoffset: 0;
  background: var(--cb-checked-bg);
  border-color: var(--cb-checked-bg);
}
@media (prefers-reduced-motion: reduce) {
  go-checkbox :where(.box) input:checked ~ .mark {
    transition-duration: 0s;
  }
}
go-checkbox :where(.box) input:checked ~ .mark path {
  filter: drop-shadow(var(--cb-mark-shadow-inner));
}
go-checkbox :where(.box) input:checked ~ .mark.minus {
  display: none;
}
go-checkbox :where(.box) input:checked ~ .mark.tick {
  display: block;
}
go-checkbox :where(.box) input:indeterminate ~ .mark {
  background: var(--cb-checked-bg);
  border-color: var(--cb-checked-bg);
  stroke-dashoffset: 0;
}
go-checkbox :where(.box) input:indeterminate ~ .mark path {
  filter: drop-shadow(var(--cb-mark-shadow-inner));
}
go-checkbox :where(.box) input:indeterminate ~ .mark.minus {
  display: block;
}
go-checkbox :where(.box) input:indeterminate ~ .mark.tick {
  display: none;
}
go-checkbox :where(.box) input:not(:disabled):hover:not(:checked) ~ .mark {
  border-color: var(--cb-border-color-hover);
}
go-checkbox :where(.box) input:not(:disabled):hover:checked ~ .mark, go-checkbox :where(.box) input:not(:disabled):focus-visible ~ .mark {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  outline-offset: var(--go-focus-outline-offset);
}
go-checkbox :where(.box) input:not(:disabled):active ~ .mark {
  box-shadow: var(--input-focus-shadow);
  outline-offset: 0;
}
go-checkbox .hint {
  color: var(--input-hint-color);
  line-height: 1;
  font-size: var(--input-hint-font-size);
}
go-checkbox .hint:last-child {
  margin-bottom: 0;
}