@use '../../theme/styles' as theme;

.wr-checkbox {
  --wr-checkbox-size: 1.125rem; // md box (18px)
  --wr-checkbox-radius: var(--wr-control-radius-md);
  --wr-checkbox-font-size: var(--wr-text-sm);
  --wr-checkbox-line-height: var(--wr-control-line-height-md);
  --wr-checkbox-bg: var(--wr-color-white);
  --wr-checkbox-border: var(--wr-color-light);
  --wr-checkbox-mark: transparent;
  --wr-checkbox-color: var(--wr-color-dark);

  display: inline-flex;
  vertical-align: middle;
  color: var(--wr-checkbox-color);
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-checkbox-font-size);
  line-height: var(--wr-checkbox-line-height);

  &__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
  }

  &__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;

    &:focus-visible + .wr-checkbox__box {
      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
    }
  }

  &__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--wr-checkbox-size);
    height: var(--wr-checkbox-size);
    background: var(--wr-checkbox-bg);
    border: 1px solid var(--wr-checkbox-border);
    border-radius: var(--wr-checkbox-radius);
    color: var(--wr-checkbox-mark);
    transition: var(--wr-transition-base);
  }

  &__mark {
    width: 100%;
    height: 100%;
    transform: scale(0.7);
    opacity: 0;
    transition:
      transform var(--wr-transition-base),
      opacity var(--wr-transition-base);
  }

  &__icon {
    --wr-icon-size: calc(var(--wr-checkbox-size) - 0.375rem);
    opacity: 0;
    transform: scale(0.7);
    transition:
      transform var(--wr-transition-base),
      opacity var(--wr-transition-base);
  }

  &__label:hover &__box {
    --wr-checkbox-border: var(--wr-color-primary);
  }

  // Sizes — box, radius, label font + line-height scale together.
  &--sm {
    --wr-checkbox-size: 1rem; // 16px
    --wr-checkbox-radius: var(--wr-control-radius-sm);
    --wr-checkbox-font-size: var(--wr-text-xs);
    --wr-checkbox-line-height: var(--wr-control-line-height-sm);
  }

  &--lg {
    --wr-checkbox-size: 1.25rem; // 20px
    --wr-checkbox-radius: var(--wr-control-radius-lg);
    --wr-checkbox-font-size: var(--wr-text-base);
    --wr-checkbox-line-height: var(--wr-control-line-height-lg);
  }

  &--checked {
    --wr-checkbox-bg: var(--wr-color-primary);
    --wr-checkbox-border: var(--wr-color-primary);
    --wr-checkbox-mark: var(--wr-color-primary-contrast);

    .wr-checkbox__mark,
    .wr-checkbox__icon {
      transform: scale(1);
      opacity: 1;
    }
  }

  &--disabled {
    --wr-checkbox-color: var(--wr-color-medium);
    pointer-events: none;
    opacity: 0.6;
  }
}

.wr-checkbox-group {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
}