:root,
.light-theme, // 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: var(--input-selected-indicator-color);
  --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;

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

  &.p-highlight,
  &.p-highlight.p-focus,
  &.p-indeterminate {
    --checkbox-background-color: var(--input-accent-color);
    --checkbox-border-color: rgba(var(--base-black-rgb), .3); // replacing color for light & dark, looks better :3
  }

  &.p-focus {
    --checkbox-border-color: var(--input-accent-color);

    box-shadow: var(--checkbox-box-shadow);
  }

  &.p-disabled {
    --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);

    // Needed to overwrite .p-disabled !important from base.scss
    border-color: var(--checkbox-border-color) !important;

    opacity: 1;

    &.p-highlight {
      --checkbox-background-color: var(--input-disabled-background-color);
    }
  }
}

.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;
  }
}

.p-checkbox-icon {
  &.pi-check:before {
    font-family: devolutions-icons, serif;
    content: "\e93a";
  }

  &.pi-minus:before {
    font-family: devolutions-icons, serif;
    content: "\ea99";
  }
}

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