:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
   * @prop --border-color: Default control border color. Default var(--nano-color-primary-1000);
   * @prop --label-color: Default label color. Default var(--nano-color-base-1000);
   * @prop --spacing: Spacing between label and control. Default var(--nano-spacing-sm);
   * @prop --active-background: Control background when active. Default var(--nano-color-primary-1000);
   * @prop --active-foreground: Control foreground when active. Default var(--nano-color-basic-white);
   * @prop --error-color: Error color. Default var(--nano-color-danger-1100);
   * @prop --disabled-label-color: Label color when disabled. Default var(--nano-color-neutral-1000);
   * @prop --disabled-background: Background color when disabled. Default var(--nano-color-neutral-300);
   * @prop --disabled-foreground: Foreground color when disabled. Default var(--nano-color-neutral-700);
   * @prop --disabled-border-color: Border color when disabled. Default var(--nano-color-neutral-1000);
   */
  --border-color: var(--nano-color-primary-1000);
  --label-color: var(--nano-color-base-1000);
  --spacing: var(--nano-spacing-sm);
  --active-background: var(--nano-color-primary-1000);
  --active-foreground: var(--nano-color-basic-white);
  --error-color: var(--nano-color-danger-1100);
  --disabled-label-color: var(--nano-color-neutral-1000);
  --disabled-background: var(--nano-color-neutral-300);
  --disabled-foreground: var(--nano-color-neutral-700);
  --disabled-border-color: var(--nano-color-neutral-1000);
  display: inline-block;
  max-inline-size: 100%;
}

.nanocb {
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1.2;
  position: relative;
  font-size: 1rem;
}
.nanocb input {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}
.nanocb input:focus-visible ~ .nanocb__input {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
.nanocb input:checked ~ .nanocb__input,
.nanocb input:indeterminate ~ .nanocb__input {
  background-color: var(--active-background);
}
.nanocb.nanocb--disabled {
  cursor: not-allowed;
}

:host(:not([hide-label])) .nanocb {
  gap: var(--spacing);
}

:host(:not([type=tag])) .nanocb__label--hidden,
:host(:not([type=segment])) .nanocb__label--hidden {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}

.nanocb__radio .nanocb__input,
.nanocb__checkbox .nanocb__input {
  display: grid;
  place-content: center center;
  block-size: 1.125em;
  inline-size: 1.125em;
  min-inline-size: 1.125em;
  min-block-size: 1.125em;
  border-radius: 1px;
  border: 1px solid var(--border-color);
}
.nanocb__radio .nanocb__input::after,
.nanocb__checkbox .nanocb__input::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  border: solid var(--active-foreground);
  border-width: 0 0.125em 0.125em 0;
  opacity: 1;
  transition: scale var(--nano-transition-x-fast) ease-out;
  transform-origin: center;
  rotate: 45deg;
  scale: 0;
  inline-size: 0.325em;
  block-size: 0.5625em;
  margin-block-start: -0.1875em;
}
.nanocb--indeterminate .nanocb__radio .nanocb__input::after,
.nanocb--indeterminate .nanocb__checkbox .nanocb__input::after {
  border-width: 0 0 0.1875em;
}
.nanocb__radio .nanocb__label,
.nanocb__checkbox .nanocb__label {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  color: var(--label-color);
}
.nanocb__radio input:checked ~ .nanocb__input::after,
.nanocb__checkbox input:checked ~ .nanocb__input::after {
  scale: 1;
}
.nanocb__radio input:indeterminate ~ .nanocb__input::after,
.nanocb__checkbox input:indeterminate ~ .nanocb__input::after {
  scale: 1;
  rotate: 0deg;
  block-size: 1px;
  inline-size: 0.625em;
  border-width: 0 0 0.125em;
  margin-block-start: 0;
}
.nanocb__radio.nanocb--invalid .nanocb__input,
.nanocb__checkbox.nanocb--invalid .nanocb__input {
  outline: 1px solid var(--error-color);
  outline-offset: 1px;
}
.nanocb__radio.nanocb--disabled .nanocb__input,
.nanocb__checkbox.nanocb--disabled .nanocb__input {
  border: 1px solid var(--disabled-border-color);
  background: var(--disabled-background);
}
.nanocb__radio.nanocb--disabled .nanocb__input::after,
.nanocb__checkbox.nanocb--disabled .nanocb__input::after {
  display: none;
}
.nanocb__radio.nanocb--disabled .nanocb__label,
.nanocb__checkbox.nanocb--disabled .nanocb__label {
  color: var(--disabled-label-color);
}

.nanocb__radio .nanocb__input {
  border-radius: 50%;
}
.nanocb__radio .nanocb__input::after {
  border-radius: 50%;
  background: var(--active-foreground);
  border: none;
  margin: 0 !important;
}
.nanocb__radio input:checked ~ .nanocb__input::after {
  scale: 1;
  opacity: 1;
  block-size: 0.5em;
  inline-size: 0.5em;
}
.nanocb__radio input:indeterminate ~ .nanocb__input {
  background-color: transparent;
}
.nanocb__radio input:indeterminate ~ .nanocb__input::after {
  display: none;
}

.nanocb__switch .nanocb__input {
  inline-size: 2.1875em;
  block-size: 1.125em;
  border: 1px solid var(--border-color);
  border-radius: var(--nano-border-radius-pill);
}
.nanocb__switch .nanocb__input::after {
  content: "";
  position: relative;
  display: block;
  border-radius: var(--nano-border-radius-circle);
  block-size: 0.75em;
  inline-size: 0.75em;
  background-color: var(--active-background);
  transform-origin: left;
  inset-inline-start: 0.125em;
  inset-block-start: 50%;
  transform: translateY(-50%);
  transition: 0.1s ease scale, 0.1s ease background-color, 0.15s ease left;
}
.nanocb__switch input:checked ~ .nanocb__input::after {
  inset-inline-start: 1.1875em;
  transform-origin: right;
  background-color: var(--active-foreground);
}
.nanocb__switch .nanocb__label {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  color: var(--label-color);
}
.nanocb__switch.nanocb--invalid .nanocb__input {
  outline: 1px solid var(--error-color);
  outline-offset: 1px;
}
.nanocb__switch.nanocb--disabled .nanocb__input {
  border: 1px solid var(--disabled-background);
  background: var(--disabled-background);
}
.nanocb__switch.nanocb--disabled .nanocb__input::after {
  background: var(--disabled-foreground);
}
.nanocb__switch.nanocb--disabled .nanocb__label {
  color: var(--disabled-label-color);
}

:host([type=segment]) {
  display: inline-block;
}

.nanocb__segment .nanocb__input {
  display: none;
}
.nanocb__segment .nanocb__label {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  color: var(--label-color);
  padding: 0.4375em 0.9375em;
  border: 1px solid var(--active-background);
}
:host(:first-of-type) .nanocb__segment .nanocb__label {
  border-inline-end: 1px solid var(--nano-color-neutral-300);
  border-start-start-radius: var(--nano-border-radius-pill);
  border-end-start-radius: var(--nano-border-radius-pill);
}
:host(:not(:last-of-type, :first-of-type)) .nanocb__segment .nanocb__label {
  border-inline-start: none;
  border-inline-end: 1px solid var(--nano-color-neutral-300);
}
:host(:last-of-type) .nanocb__segment .nanocb__label {
  border-inline-start: none;
  border-inline-end: 1px solid var(--active-background) !important;
  border-start-end-radius: var(--nano-border-radius-pill);
  border-end-end-radius: var(--nano-border-radius-pill);
}
:host(:first-of-type:last-of-type) .nanocb__segment .nanocb__label {
  border: 1px solid var(--active-background);
}
.nanocb__segment input:checked ~ .nanocb__label {
  color: var(--active-foreground);
  background-color: var(--active-background);
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2) inset;
}
.nanocb__segment input:focus-visible:focus ~ .nanocb__label {
  outline: var(--nano-focus-ring);
  outline-offset: 1px;
  z-index: 1;
}
.nanocb__segment.nanocb--invalid .nanocb__label {
  outline: 1px solid var(--error-color);
  outline-offset: 1px;
}
.nanocb__segment.nanocb--disabled .nanocb__label {
  background-color: var(--disabled-background);
  color: var(--disabled-label-color);
}

:host([type=tag]) {
  display: inline-block;
}

.nanocb__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--active-background);
  color: var(--nano-color-primary-1100);
  font-size: var(--nano-font-size-2xs);
  font-weight: bold;
  transition: background-color var(--nano-transition-x-fast) ease-out;
}
.nanocb__tag:hover {
  background-color: var(--nano-color-primary-100);
}
.nanocb__tag:has(input:checked) {
  background-color: var(--nano-color-primary-300);
}
.nanocb__tag:has(input:focus-visible:focus) {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
  z-index: 1;
}
.nanocb__tag .nanocb__label {
  order: 0;
  -webkit-user-select: none;
          user-select: none;
}
.nanocb__tag .nanocb__input {
  order: 1;
  display: grid;
  place-content: center center;
  block-size: 1.125em;
  inline-size: 1.125em;
  border-radius: 1px;
  border: 1px solid var(--border-color);
  outline: none !important;
}
.nanocb__tag .nanocb__input::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  block-size: 0;
  inline-size: 0;
  border: solid var(--active-foreground);
  border-width: 0 0.125em 0.125em 0;
  opacity: 1;
  transition: scale var(--nano-transition-x-fast) ease-out;
  transform-origin: center;
  rotate: 45deg;
  scale: 0;
}
.nanocb--indeterminate .nanocb__tag .nanocb__input::after {
  border-width: 0 0 0.1875em;
}
.nanocb__tag.nanocb--invalid {
  outline: 1px solid var(--error-color);
  outline-offset: 1px;
}
.nanocb__tag.nanocb--disabled {
  background: var(--disabled-background);
  border: 1px solid var(--disabled-border-color);
}
.nanocb__tag.nanocb--disabled .nanocb__input {
  border: 1px solid var(--disabled-border-color);
  background: var(--disabled-background);
}
.nanocb__tag.nanocb--disabled .nanocb__input::after {
  display: none;
}
.nanocb__tag.nanocb--disabled .nanocb__label {
  color: var(--disabled-label-color);
}
.nanocb__tag input:checked ~ .nanocb__input::after {
  scale: 1;
  inline-size: 0.325em;
  block-size: 0.5625em;
  margin-block-start: -0.1875em;
}