:host {
  display: inline-flex;
}

  :host * {
    box-sizing: border-box;
  }

.checkbox {
  display: inline-flex;
  line-height: var(--s-line-height-base);
  cursor: pointer;
  flex-grow: 1;
}

.checkbox:focus-within .checkbox__box {
    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
      0 0 0 0.1875rem var(--s-focus-default);
  }

.checkbox--variant-card {
  width: 100%;
  padding: var(--s-space-16);
  border: 0.0625rem solid var(--s-border-default);
  border-radius: var(--s-border-radius-sm);
  background-color: var(--s-surface);
}

.checkbox--variant-card:focus-within {
    box-shadow: 0 0 0 0.125rem var(--s-background-default),
      0 0 0 0.25rem var(--s-focus-default);
  }

.checkbox--variant-card:focus-within .checkbox__box {
      box-shadow: none;
    }

.checkbox--variant-card:hover:not(.checkbox--disabled) {
    background-color: var(--s-state-hovered);
  }

.checkbox--variant-card:active:not(.checkbox--disabled) {
    background-color: var(--s-state-pressed);
  }

.checkbox--variant-card.checkbox--checked:not(.checkbox--disabled) {
    border-color: var(--s-border-highlight);
  }

.checkbox--variant-card.checkbox--invalid:not(.checkbox--disabled) {
    border-color: var(--s-border-critical);
  }

.checkbox--checked .checkbox__control:hover .checkbox__box, .checkbox--indeterminate .checkbox__control:hover .checkbox__box {
        border-color: var(--s-interactive-primary-hovered);
        background-color: var(--s-interactive-primary-hovered);
      }

.checkbox--checked .checkbox__box, .checkbox--indeterminate .checkbox__box {
    border-color: var(--s-icon-highlight);
    color: var(--s-text-on-status);
    background-color: var(--s-icon-highlight);
  }

.checkbox--invalid.checkbox--checked .checkbox__box, .checkbox--invalid.checkbox--indeterminate .checkbox__box {
      background-color: var(--s-icon-critical);
    }

.checkbox--invalid .checkbox__box {
    border-color: var(--s-icon-critical);
  }

.checkbox--disabled {
  cursor: default;
}

.checkbox--disabled.checkbox--checked .checkbox__control:hover .checkbox__box, .checkbox--disabled.checkbox--indeterminate .checkbox__control:hover .checkbox__box {
          border-color: var(--s-icon-disabled);
          background-color: var(--s-icon-disabled);
        }

.checkbox--disabled.checkbox--checked .checkbox__box, .checkbox--disabled.checkbox--indeterminate .checkbox__box {
      background-color: var(--s-icon-disabled);
    }

.checkbox--disabled .checkbox__control:hover .checkbox__box {
        background-color: transparent;
      }

.checkbox--disabled .checkbox__box {
    border-color: var(--s-icon-disabled);
  }

.checkbox--disabled .checkbox__label,
  .checkbox--disabled .checkbox__description {
    color: var(--s-text-disabled);
  }

.checkbox--label-weight-regular .checkbox__label {
    font-weight: var(--s-font-weight-regular);
  }

.checkbox__control {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: var(--s-space-2);
  flex-shrink: 0;
}

.checkbox__control:hover .checkbox__box {
      background-color: var(--s-action-neutral-hovered);
    }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.checkbox__control {
    width: 1.375rem;
    height: 1.375rem
}
  }

.checkbox__box {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  border: 0.125rem solid var(--s-icon-default);
  border-radius: var(--s-border-radius-s);
}

.checkbox__icon {
  display: inline-flex;
  width: 1.0625rem;
  height: 1.0625rem;
}

.checkbox__icon > *::part(icon) {
    width: 1.0625rem;
    height: 1.0625rem;
  }

.checkbox__indeterminate-icon {
  position: relative;
  width: 100%;
  height: 100%;
}

.checkbox__indeterminate-icon:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;
    height: 0.125rem;
    border-radius: 0.0625rem;
    background-color: currentColor;
    content: "";
    transform: translate3d(-50%, -50%, 0);
  }

.checkbox__label-container {
  display: inline-flex;
  margin-left: var(--s-space-8);
  align-items: flex-start;
  flex-direction: column;
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.checkbox__label-container {
    padding-top: var(--s-space-2)
}
  }

.checkbox__label {
  font-weight: var(--s-font-weight-medium);
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.checkbox__label {
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }

.checkbox__description {
  color: var(--s-text-subdued);
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.checkbox__description {
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }