/* stylelint-disable selector-max-type */
/* stylelint-disable max-nesting-depth */
/* stylelint-disable selector-max-specificity */
/* stylelint-disable primer/spacing */
/* FormControl */
/* groups label, field, caption and inline error message */
.FormControl {
  display: inline-flex;
  flex-direction: column;
  gap: var(--base-size-4);
}
/* fill container */
.FormControl--fullWidth {
  display: flex;
}
/* <label> */
.FormControl-label {
  font-size: var(--text-body-size-medium);
  font-weight: var(--base-text-weight-semibold);
  line-height: var(--text-body-lineHeight-medium);
  color: var(--fgColor-default);
}
/* optional caption */
.FormControl-caption {
  margin-bottom: 0;
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-lineHeight);
  color: var(--fgColor-muted);
}
/* inline validation message */
.FormControl-inlineValidation {
  display: flex;
  font-size: var(--text-caption-size);
  font-weight: var(--base-text-weight-semibold);
  line-height: var(--text-caption-lineHeight);
  color: var(--control-danger-fgColor-rest);
  fill: var(--control-danger-fgColor-rest);
  flex-direction: row;
  align-items: flex-start;
  gap: var(--base-size-4);
}
.FormControl-inlineValidation p {
    margin-bottom: 0;
  }
.FormControl-inlineValidation--success {
  color: var(--fgColor-success);
  fill: var(--fgColor-success);
}
.FormControl-inlineValidation--visual {
  align-items: center;
  display: flex;
  min-height: var(--base-size-16);
}
.FormControl-spacingWrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--stack-gap-normal);
}
.FormControl-horizontalGroup {
  display: flex;
  column-gap: 0.5rem;
}
/* shared among all form control components (input, select, textarea, checkbox, radio) */
/* TextInput structure
** ===================
**
** .FormControl
** ├─ .FormControl-label
** │  ├─ .FormControl-input-wrap
** │  │  ├─ .FormControl-input-trailingVisualWrap
** │  │  │  ├─ .FormControl-input-trailingVisual
** │  │  ├─ .FormControl-input-leadingVisualWrap
** │  │  │  ├─ .FormControl-input-leadingVisual
** │  │  ├─ .FormControl-input
** │  │  ├─ .FormControl-input-trailingAction
** ├─ .FormControl-inlineValidation
** ├─ .FormControl-caption */
/* // Select structure
** ===================
**
** .FormControl
** ├─ .FormControl-label
** │  ├─ .FormControl-select-wrap
** │  │  ├─ .FormControl-select
** ├─ .FormControl-inlineValidation
** ├─ .FormControl-caption */
/* // Textarea structure
** ===================
**
** .FormControl
** ├─ .FormControl-label
** ├─ .FormControl-textarea
** ├─ .FormControl-inlineValidation
** ├─ .FormControl-caption */
.FormControl-input,
.FormControl-select,
.FormControl-textarea {
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
  box-shadow: var(--shadow-inset);
}
[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    color: var(--control-fgColor-disabled);
    cursor: not-allowed;
    background-color: var(--control-bgColor-disabled);
    border-color: var(--control-borderColor-disabled);
    box-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--control-fgColor-disabled);
  }
[invalid='true']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
    border-color: var(--control-borderColor-danger);
  }
[invalid='false']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
    border-color: var(--control-borderColor-success);
  }
:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
    /* remove fallback :focus if :focus-visible is supported */
  }
:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
      border-color: transparent;
      border-color: var(--focus-outlineColor);
      outline: none;
      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
    }
/* default focus state */
:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus-visible {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
  }
.FormControl-input,
.FormControl-select,
.FormControl-textarea {
  width: 100%;
  font-size: var(--text-body-size-medium);
  line-height: var(--text-body-lineHeight-medium);
  border-radius: var(--borderRadius-medium);
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color, background-color, box-shadow, border-color;
  padding-inline: var(--control-medium-paddingInline-condensed);
  padding-block: calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin));
}
[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
      color: var(--control-fgColor-disabled);
    }
[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    background-color: var(--control-bgColor-disabled);
  }
:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
    color: var(--control-fgColor-placeholder);
    opacity: 1;
  }
/* sizes */
.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    height: var(--control-small-size);
    padding-inline: var(--control-small-paddingInline-normal);
    padding-block: var(--control-small-paddingBlock);
    font-size: var(--text-body-size-small);
  }
.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    height: var(--control-medium-size);
  }
.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    height: var(--control-large-size);
    padding-inline: var(--control-large-paddingInline-normal);
    padding-block: var(--control-large-paddingBlock);
  }
/* variants */
.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    background-color: var(--bgColor-muted);
  }
.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus {
      background-color: var(--bgColor-default);
    }
.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    font-family: var(--fontStack-monospace);
  }
/* validation states */
.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    border-color: var(--control-borderColor-danger);
  }
.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    border-color: var(--control-borderColor-success);
  }
.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
    border-color: var(--control-borderColor-warning);
  }
.FormControl-toggleSwitchInput {
  display: flex;
  align-items: flex-start;
  gap: var(--base-size-16);
}
/* positioning for leading/trailing items for TextInput */
.FormControl-input-wrap {
  position: relative;
  display: grid;
}
.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
    position: absolute;
    top: var(--base-size-8);
    left: var(--base-size-8);
    display: block;
    width: var(--base-size-16);
    height: var(--base-size-16);
    color: var(--fgColor-muted);
    pointer-events: none;
    /* octicon */
  }
:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual {
      display: block;
      -webkit-user-select: none;
              user-select: none;
    }
.FormControl-input-wrap .FormControl-input-trailingVisualWrap {
    position: absolute;
    top: var(--base-size-8);
    right: var(--base-size-8);
    display: flex;
    height: var(--base-size-16);
    align-items: center;
    gap: var(--base-size-4);
    color: var(--fgColor-muted);
    pointer-events: none;
  }
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText) {
      max-width: 25%;
      padding-left: var(--base-size-8);
    }
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel) {
      max-width: 25%;
      padding-left: var(--base-size-8);
    }
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel {
      overflow: hidden;
      text-overflow: ellipsis;
    }
/* TODO: replace with new Button component */
.FormControl-input-wrap .FormControl-input-trailingAction {
    position: absolute;
    top: var(--base-size-4);
    right: var(--base-size-4);
    z-index: 4;
    display: grid;
    width: var(--control-xsmall-size);
    height: var(--control-xsmall-size);
    padding: 0;
    color: var(--fgColor-muted);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--borderRadius-small);
    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    transition-property: color, background-color, border-color;
    align-items: center;
    justify-content: center;
  }
:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg {
      -webkit-user-select: none;
              user-select: none;
    }
[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction) {
      color: var(--control-fgColor-disabled);
      pointer-events: none;
    }
:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover {
      background: var(--control-transparent-bgColor-hover);
    }
:is(.FormControl-input-wrap .FormControl-input-trailingAction):active {
      background: var(--control-transparent-bgColor-active);
    }
/* show vertical divider line between field and button */
.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before {
        position: absolute;
        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
        left: calc(var(--base-size-4) * -1);
        display: block;
        width: var(--borderWidth-thin);
        height: var(--base-size-16);
        content: '';
        /* stylelint-disable-next-line primer/colors */
        background: var(--borderColor-default);
      }
:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--control-medium-size) var(--control-medium-size);
  content: "";
  transform: translateX(-50%) translateY(-50%);
}
@media (pointer: coarse) {
:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after {
        min-width: var(--control-minTarget-coarse);
        min-height: var(--control-minTarget-coarse);
    }
      }
/* if leadingVisual is present */
/*
	┌──32px──┬────────────────────┐
	╎  ┌───┐   ┌────────────────┐ ╎
	╎   16px    16px              ╎
	╎  └───┘   └────────────────┘ ╎
	└───────8px───────────────────┘
	*/
.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input {
      padding-inline-start: calc(
        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
      ); /* 32px */
    }
/* if trailingVisual is present */
/*
	┌──────────────────┬──32px──┐
	╎  ┌──────────────┐  ┌────┐ ╎
	╎   24px               24px ╎
	╎  └──────────────┘  └────┘ ╎
	└──────────────────┴────────┘
  */
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input {
      padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
    }
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
      padding-inline-end: 25%
    }
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
      padding-inline-end: 25%
    }
/*
	┌──────────────────┬──32px──┐
	╎  ┌──────────────┐  ┌────┐ ╎
	╎   24px               24px ╎
	╎  └──────────────┘  └────┘ ╎
	└──────────────────┴────────┘
  */
/* if trailingAction is present */
.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input {
      padding-inline-end: calc(
        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
      ); /* 32px */
    }
/*
		32px + 1px border
		┌──────────────────┬──33px──┐
		╎  ┌──────────────┐  ┌────┐ ╎
		╎   24px               24px   ╎
		╎  └──────────────┘  └────┘ ╎
		└──────────────────┴────────┘
		*/
/* if trailingAction divider is present, add 1px padding to accomodate input field text
    ** can be refactored to has(.FormControl-input-trailingAction--divider) */
.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input {
        padding-inline-end: calc(
          var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
            var(--borderWidth-thin)
        ); /* 33px */
      }
/* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
  // sizes */
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap {
      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
      left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
    }
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap {
      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
      right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
    }
/*
    ┌──────────────────┬──28px──┐
    ╎  ┌──────────────┐  ┌────┐ ╎
    ╎   20px               20px   ╎
    ╎  └──────────────┘  └────┘ ╎
    └──────────────────┴────────┘
    */
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small {
        padding-inline-end: calc(
          var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
        ); /* 28px */
      }
/*
			28px + 1px border
			┌──────────────────┬──29px──┐
			╎  ┌──────────────┐  ┌────┐ ╎
			╎   20px               20px   ╎
			╎  └──────────────┘  └────┘ ╎
			└──────────────────┴────────┘
			*/
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small {
          padding-inline-end: calc(
            var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
              var(--borderWidth-thin)
          ); /* 29px */
        }
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction {
      width: calc(var(--control-small-size) - var(--base-size-8));
      height: calc(var(--control-small-size) - var(--base-size-8));
    }
:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction)::before {
        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
      }
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap {
      top: var(--control-medium-paddingInline-normal);
      left: var(--control-medium-paddingInline-normal);
    }
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap {
      top: var(--control-medium-paddingInline-normal);
      right: var(--control-medium-paddingInline-normal);
    }
/*
    ┌──36px──┬───12px padding──────┐
    ╎  ┌───┐   ┌────────────────┐ ╎
    ╎   16px    16px                ╎
    ╎  └───┘   └────────────────┘ ╎
    └12px───8px───────────────────┘
    */
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large {
        padding-inline-start: calc(
          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
        ); /* 36px */
      }
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input {
        padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
      }
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
        padding-inline-end: 25%
      }
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
        padding-inline-end: 25%
      }
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large {
        padding-inline-end: 25%;
      }
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large {
        padding-inline-end: 25%;
      }
/*
    ┌──────────────────┬──36px──┐
    ╎  ┌──────────────┐  ┌────┐ ╎
    ╎   28px               28px   ╎
    ╎  └──────────────┘  └────┘ ╎
    └──────────────────┴────────┘
    */
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large {
        padding-inline-end: calc(
          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
        ); /* 36px */
      }
/*
			┌──────────────────┬──37px──┐
			╎  ┌──────────────┐  ┌────┐ ╎
			╎   28px               28px   ╎
			╎  └──────────────┘  └────┘ ╎
			└──────────────────┴────────┘
			*/
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large {
          padding-inline-end: calc(
            var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
              var(--borderWidth-thin)
          ); /* 37px */
        }
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction {
      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
      right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
      width: var(--control-small-size);
      height: var(--control-small-size);
    }
:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before {
        top: unset;
        height: var(--base-size-20);
      }
.FormControl-select-wrap {
  display: grid;
  grid-template-columns: minmax(0, auto) var(--base-size-16);
  /* mask allows for background-color to respect themes */
}
.FormControl-select-wrap::after {
    width: var(--base-size-16);
    height: var(--base-size-16);
    padding-right: var(--base-size-4);
    pointer-events: none;
    content: '';
    background-color: var(--bgColor-neutral-emphasis);
    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
            mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    grid-column: 2;
    grid-row: 1;
    place-self: center end;
  }
/* spans entire grid below mask */
.FormControl-select-wrap .FormControl-select {
    grid-column: 1/-1;
    grid-row: 1;
    -webkit-appearance: none;
            appearance: none;
    padding-right: var(--base-size-20);
  }
.FormControl-select-wrap[data-multiple]::after {
      content: none;
    }
.FormControl-select-wrap[data-multiple] .FormControl-select {
      padding-right: var(--base-size-8);
    }
/* checkbox + radio specific styles */
/* // Checkbox + Radio structure
** ===================
**
** .FormControl-radio-wrap
** ├─ .FormControl-radio
** ├─ .FormControl-radio-labelWrap
** │  ├─ .FormControl-label
** │  ├─ .FormControl-caption */
.FormControl-checkbox-wrap,
.FormControl-radio-wrap {
  display: inline-grid;
  grid-template-columns: min-content auto;
  gap: var(--base-size-8);
}
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap {
    display: flex;
    flex-direction: column;
    gap: var(--base-size-4);
  }
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label {
    cursor: pointer;
  }
.FormControl-radio-group-wrap fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }
.FormControl-check-group-wrap fieldset {
    padding: 0;
    margin: 0;
    border: 0;
  }
/* these selectors are temporary to override base.scss
** once Field styles are widely adopted, we can adjust this and the global base styles */
.FormControl-checkbox {
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
  box-shadow: var(--shadow-inset);
}
.FormControl-checkbox[disabled] {
    color: var(--control-fgColor-disabled);
    cursor: not-allowed;
    background-color: var(--control-bgColor-disabled);
    border-color: var(--control-borderColor-disabled);
    box-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--control-fgColor-disabled);
  }
.FormControl-checkbox[invalid='true']:not(:focus) {
    border-color: var(--control-borderColor-danger);
  }
.FormControl-checkbox[invalid='false']:not(:focus) {
    border-color: var(--control-borderColor-success);
  }
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
    /* remove fallback :focus if :focus-visible is supported */
  }
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
      border-color: transparent;
      border-color: var(--focus-outlineColor);
      outline: none;
      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
    }
/* default focus state */
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
  }
.FormControl-checkbox {
  position: relative;
  display: grid;
  width: var(--base-size-16);
  height: var(--base-size-16);
  margin: 0;
  margin-top: var(--base-size-2); /* 2px to center align with label (20px line-height) */
  cursor: pointer;
  border-color: var(--control-borderColor-emphasis);
  border-radius: var(--borderRadius-small);
  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
  -webkit-appearance: none;
          appearance: none;
  place-content: center;
}
.FormControl-checkbox::before {
    width: var(--base-size-16);
    height: var(--base-size-16);
    visibility: hidden;
    content: '';
    /* stylelint-disable-next-line primer/colors */
    background-color: var(--control-checked-fgColor-rest);
    transition: visibility 0s linear 230ms;
    clip-path: inset(var(--base-size-16) 0 0 0);
    /* octicon checkmark image */
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
            mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
    -webkit-mask-size: 75%;
            mask-size: 75%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
  }
/* extend touch target */
:is(.FormControl-checkbox::after) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--control-medium-size) var(--control-medium-size);
  content: "";
  transform: translateX(-50%) translateY(-50%);
}
:is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label {
        color: var(--control-fgColor-disabled);
        cursor: not-allowed;
      }
.FormControl-checkbox:checked {
    background: var(--control-checked-bgColor-rest, var(--color-accent-fg));
    border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
    transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
  }
.FormControl-checkbox:checked::before {
      visibility: visible;
      transition: visibility 0s linear 0s;
      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
    }
.FormControl-checkbox:checked:disabled {
      cursor: not-allowed;
      /* stylelint-disable-next-line primer/colors */
      background-color: var(--control-fgColor-disabled);
      /* stylelint-disable-next-line primer/colors */
      border-color: var(--control-fgColor-disabled);
      opacity: 1;
    }
.FormControl-checkbox:checked:disabled::before {
        /* stylelint-disable-next-line primer/colors */
        background-color: var(--control-checked-fgColor-rest);
      }
/* Windows High Contrast mode */
@media (forced-colors: active) {
.FormControl-checkbox:checked {
      background-color: canvastext;
      border-color: canvastext;
  }
    }
.FormControl-checkbox:focus-visible {
    outline: 2px solid var(--focus-outlineColor);
    outline-offset: 2px;
    box-shadow: none;
  }
.FormControl-checkbox:indeterminate::before {
      -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
              mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
      visibility: visible;
    }
.FormControl-radio {
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
  box-shadow: var(--shadow-inset);
}
.FormControl-radio[disabled] {
    color: var(--control-fgColor-disabled);
    cursor: not-allowed;
    background-color: var(--control-bgColor-disabled);
    border-color: var(--control-borderColor-disabled);
    box-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--control-fgColor-disabled);
  }
.FormControl-radio[invalid='true']:not(:focus) {
    border-color: var(--control-borderColor-danger);
  }
.FormControl-radio[invalid='false']:not(:focus) {
    border-color: var(--control-borderColor-success);
  }
.FormControl-radio:not([type='checkbox'],[type='radio']):focus {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
    /* remove fallback :focus if :focus-visible is supported */
  }
.FormControl-radio:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
      border-color: transparent;
      border-color: var(--focus-outlineColor);
      outline: none;
      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
    }
/* default focus state */
.FormControl-radio:not([type='checkbox'],[type='radio']):focus-visible {
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
  }
.FormControl-radio {
  position: relative;
  width: var(--base-size-16);
  height: var(--base-size-16);
  margin: 0;
  margin-top: var(--base-size-2); /* 2px to center align with label (20px line-height) */
  cursor: pointer;
  border-color: var(--control-borderColor-emphasis);
  border-radius: var(--borderRadius-full);
  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
  -webkit-appearance: none;
          appearance: none;
}
:is(.FormControl-radio::after) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: var(--control-medium-size) var(--control-medium-size);
  content: "";
  transform: translateX(-50%) translateY(-50%);
}
:is(.FormControl-radio[disabled] ~ .FormControl-radio-labelWrap) .FormControl-label {
        color: var(--control-fgColor-disabled);
        cursor: not-allowed;
      }
.FormControl-radio:checked {
    border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
    /* stylelint-disable-next-line primer/borders */
    border-width: var(--base-size-4);
  }
.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled {
      cursor: not-allowed;
      /* stylelint-disable-next-line primer/colors */
      border-color: var(--control-fgColor-disabled);
    }
:is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled) ~ .FormControl-radio-labelWrap) .FormControl-label {
          color: var(--control-fgColor-disabled);
          cursor: not-allowed;
        }
.FormControl-radio:focus-visible {
    outline: 2px solid var(--focus-outlineColor);
    outline-offset: 2px;
    box-shadow: none;
  }
/* Windows High Contrast mode */
@media (forced-colors: active) {
.FormControl-radio {
    background-color: canvastext;
    border-color: canvastext;
}
  }
@keyframes checkmarkIn {
  from {
    clip-path: inset(var(--base-size-16) 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes checkmarkOut {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(var(--base-size-16) 0 0 0);
  }
}