@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

:root,
.light-theme {
  --checkbox-border-color: var(--input-border-color); // $input-checkbox-border-color
  --checkbox-background-color: var(--input-background-color); // $input-checkbox-bg-color
  --checkbox-label-color: var(--input-label-color);
  --checkbox-icon-color: rgb(var(--base-black-rgb));
  --checkbox-box-shadow: var(--input-box-shadow);

  --checkbox-size: 20px;
  --checkbox-icon-size: 18px;
} // will be removed once we wrap our default css prop in :root
.dark-theme { // will be removed once we wrap our default css prop in :root
  --checkbox-border-color: var(--input-border-color); // $input-checkbox-border-color
  --checkbox-background-color: var(--input-background-color); // $input-checkbox-bg-color
  --checkbox-label-color: var(--input-label-color);
  --checkbox-icon-color: rgb(var(--base-black-rgb));
  --checkbox-box-shadow: var(--input-box-shadow);

  --checkbox-size: 20px;
  --checkbox-icon-size: 18px;
}

.p-checkbox {
  vertical-align: middle;
  margin: 0;
  width: auto;
  height: auto;
}

.p-checkbox-box {
  @include transition(background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration);

  width: var(--checkbox-size);
  height: var(--checkbox-size);

  border: 2px solid var(--checkbox-border-color);
  background-color: var(--checkbox-background-color);
  border-radius: $borderRadius;
  color: var(--checkbox-icon-color);
  font-size: var(--checkbox-icon-size);
  display: flex;
  justify-content: center;
  align-items: center;

  p-checkbox:hover &:not(.p-disabled):not(.p-highlight),
  &:hover:not(.p-disabled):not(.p-highlight) {
    --checkbox-border-color: var(--input-accent-color);
  }
}

/* checked */
.p-checkbox.p-highlight .p-checkbox-box {
  --checkbox-background-color: var(--input-accent-color);
  --checkbox-border-color: rgba(var(--base-black-rgb), .3);
  --checkbox-icon-color: rgb(var(--base-white-rgb));
}

/* disabled */
.p-checkbox.p-disabled .p-checkbox-box {
  --checkbox-border-color: var(--input-disabled-border-color);
  --checkbox-icon-color: var(--input-disabled-selected-indicator-color);
  --checkbox-background-color: var(--input-disabled-background-color);

  border-color: var(--checkbox-border-color) !important;
  opacity: 1;
}

.p-checkbox-label {
  cursor: pointer;
  color: var(--checkbox-label-color);
  padding: 0 0 0 .5em;

  &.p-disabled {
    --checkbox-label-color: var(--input-disabled-label-color);

    opacity: 1;
  }
}

.checkbox-align {
  .p-checkbox {
    align-self: center;
  }
}
