: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 --label-color: The color of the label text. Defaults to var(--nano-color-base-1000).
   * @prop --label-font-size: The font size of the label text. Defaults to var(--nano-font-size-xs).
   * @prop --invalid-msg-color: The color of the error message. Defaults to var(--nano-color-danger-1100).
   * @prop --help-msg-color: The color of the help message. Defaults to var(--nano-color-base-1000).
   * @prop --more-font-size: The font size of the more information text (either help or error messaging). Defaults to var(--nano-font-size-2xs).
    * @prop --gap: The gap between checkboxes. Defaults to var(--nano-spacing-md).
   */
  --label-color: var(--nano-color-base-1000);
  --label-font-size: var(--nano-font-size-xs);
  --invalid-msg-color: var(--nano-color-danger-1100);
  --help-msg-color: var(--nano-color-base-1000);
  --more-font-size: var(--nano-font-size-2xs);
  --gap: var(--nano-spacing-md);
  display: block;
  inline-size: 100%;
}
:host * {
  box-sizing: inherit;
}

.cbgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

.cbgroup__error,
.cbgroup__help,
.cbgroup__more {
  display: block;
  inline-size: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cbgroup__error,
.cbgroup__help {
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
  font-size: var(--more-font-size);
  line-height: 1.2;
  transition: 0.3s ease-out opacity;
  font-style: italic;
}
.show-error .cbgroup__error,
.show-error .cbgroup__help {
  opacity: 1;
}

.cbgroup__error {
  color: var(--invalid-msg-color);
  opacity: 0;
}
.has-error .cbgroup__error {
  opacity: 1;
}

.cbgroup__help {
  opacity: 1;
  color: var(--help-msg-color);
}
.has-error .cbgroup__help {
  opacity: 0;
}

.cbgroup__more {
  block-size: 1em;
  margin-block: var(--nano-spacing-sm) 0;
  position: relative;
  opacity: 0;
  display: none;
  transition: all var(--nano-transition-fast) ease;
  transition-behavior: allow-discrete;
}
.has-helper .cbgroup__more, .has-error .cbgroup__more {
  display: block;
  opacity: 1;
}

.cbgroup__legend {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  padding: 0 0 0.9375rem;
  margin: 0;
  display: block;
  inline-size: 100%;
}
.cbgroup__legend.visually-hide {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}

.cbgroup__cbs {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
:host(.types-segment) .cbgroup__cbs {
  flex-direction: row;
  --gap: 0;
}
:host(.types-tag) .cbgroup__cbs {
  flex-direction: row;
  --gap: var(--nano-spacing-sm);
}