.checkbox-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.checkbox-container--width-xs {
  min-width: var(--container-min-width-xs);
}

.checkbox-container--width-sm {
  min-width: var(--container-min-width-sm);
}

.checkbox-container--width-md {
  min-width: var(--container-min-width-md);
}

.checkbox-container--width-lg {
  min-width: var(--container-min-width-lg);
}

.checkbox-container--width-xl {
  min-width: var(--container-min-width-xl);
}

.checkbox-container--height-xs {
  min-height: var(--container-min-height-xs);
}

.checkbox-container--height-sm {
  min-height: var(--container-min-height-sm);
}

.checkbox-container--height-md {
  min-height: var(--container-min-height-md);
}

.checkbox-container--height-lg {
  min-height: var(--container-min-height-lg);
}

.checkbox-container--height-xl {
  min-height: var(--container-min-height-xl);
}

.checkbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--layer-checkbox-width);
  height: var(--layer-checkbox-height);
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-enabled) var(--v0-rt-surface-color);
  /* border-color: var(--v0-rt-surface-color);
  border-width: var(--layer-checkbox-border-width-enabled); */
  outline: none;
  transition: none;
}

.checkbox.checkbox--transition {
  transition-property: box-shadow, background-color;
  transition-duration: 0.25s;
}

.checkbox:not(.checkbox--disabled):hover {
  cursor: pointer;
}

.checkbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
  pointer-events: none;
}

.checkbox--checked,
.checkbox--intermediate,
.checkbox--disabled,
.checkbox:not(.checkbox--disabled):active {
  background-color: var(--v0-rt-surface-color);
}

.checkbox:not(
    .checkbox--checked,
    .checkbox--intermediate,
    .checkbox--disabled
  ) {
  background-color: var(--misc-pseudo-transparent, rgba(128, 128, 128, 0));
}

.checkbox--radius-primary {
  border-bottom-left-radius: var(
    --layer-checkbox-border-radius-bottom-left-primary
  );
  border-bottom-right-radius: var(
    --layer-checkbox-border-radius-bottom-right-primary
  );
  border-top-left-radius: var(--layer-checkbox-border-radius-top-left-primary);
  border-top-right-radius: var(
    --layer-checkbox-border-radius-top-right-primary
  );
}

.checkbox--radius-secondary {
  border-bottom-left-radius: var(
    --layer-checkbox-border-radius-bottom-left-secondary
  );
  border-bottom-right-radius: var(
    --layer-checkbox-border-radius-bottom-right-secondary
  );
  border-top-left-radius: var(
    --layer-checkbox-border-radius-top-left-secondary
  );
  border-top-right-radius: var(
    --layer-checkbox-border-radius-top-right-secondary
  );
}

.checkbox svg {
  stroke: var(--v0-oncontrol-main-enabled);
  pointer-events: none;
}

.checkbox:hover svg {
  stroke: var(--v0-oncontrol-main-hovered);
}

.checkbox:focus svg {
  stroke: var(--v0-oncontrol-main-enabled);
}

.checkbox:active svg {
  stroke: var(--v0-oncontrol-main-pressed);
}

.checkbox.checkbox--disabled svg {
  stroke: var(--v0-oncontrol-main-disabled);
}

.checkbox:not(.checkbox--disabled):hover {
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-hovered) var(--v0-rt-surface-color);
  /* border-width: var(--layer-checkbox-border-width-hovered); */
}

.checkbox:not(.checkbox--disabled):focus {
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-focused) var(--v0-rt-surface-color);
  /* border-width: var(--layer-checkbox-border-width-focused); */
}

.checkbox:not(.checkbox--disabled):active {
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-pressed) var(--v0-rt-surface-color);
  /* border-width: var(--layer-checkbox-border-width-pressed); */
}

.checkbox.checkbox--disabled {
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-disabled) var(--v0-rt-surface-color);
  /* border-width: var(--layer-checkbox-border-width-disabled); */
}

.checkbox.checkbox--loading {
  box-shadow: inset 0 0 0 var(--layer-checkbox-border-width-loading) var(--v0-rt-surface-color);
  /* border-width: var(--layer-checkbox-border-width-loading); */
}

.checkbox svg {
  /* width: var(--chekbox-icon-width); */
  /* height: var(--chekbox-icon-height); */
  animation: scaleIn 0.2s ease-out forwards;
  width: 100%;
  height: 100%;
  /* TODO: сделать автоген токена */
  transform: scale(0.5);
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(0.5);
  }
}