@import "theme";

// OVERRIDABLE CONFIGURATION VARIABLES

// checkbox
$checkbox-bg-color-checked: var(--rp-checkbox-bg-color-checked, none) !default;
$checkbox-border: var(--rp-checkbox-border, 1px solid var(--rp-checkbox-border-color, #2f496e)) !default;
$checkbox-border-color: var(--rp-checkbox-border-color, #2f496e) !default;
$checkbox-border-color-disabled: var(--rp-checkbox-border-color-disabled, $theme-color-disabled) !default;
$checkbox-border-radius: var(--rp-checkbox-border-radius, 2px) !default;
$checkbox-size: var(--rp-checkbox-size, 23px) !default;

// check
$checkbox-check-bg-color: var(--rp-checkbox-check-bg-color, #2f496e) !default;
$checkbox-check-icon-color: var(--rp-checkbox-check-icon-color, #fff) !default;
$checkbox-check-height: var(--rp-checkbox-check-height, calc(23 / 2 * 1px)) !default;
$checkbox-check-thickness: var(--rp-checkbox-check-thickness, 2px) !default;
$checkbox-check-vertical-offset: var(--rp-checkbox-check-vertical-offset, -4px) !default;
$checkbox-check-width: var(--rp-checkbox-check-width, calc(23 / 5 * 1px)) !default;

// label
$checkbox-label-font-family: var(--rp-checkbox-label-font-family, $theme-font-light, sans-serif) !default;
$checkbox-label-font-size: var(--rp-checkbox-label-font-size, 16px) !default;
$checkbox-label-margin: var(--rp-checkbox-label-margin, 0 0 0 20px) !default;
$checkbox-label-text-color: var(--rp-checkbox-label-text-color, #5e6066) !default;
$checkbox-label-text-color-disabled: var(--rp-checkbox-label-text-color-disabled, $theme-color-light-grey) !default;

.root {
  display: flex;
  position: relative;
  width: fit-content;
}

.input {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.check {
  align-self: center;
  border: $checkbox-border;
  border-radius: $checkbox-border-radius;
  box-sizing: border-box;
  flex-shrink: 0;
  height: $checkbox-size;
  width: $checkbox-size;

  &:hover {
    cursor: pointer;
  }
}

.label {
  color: $checkbox-label-text-color;
  font-family: $checkbox-label-font-family;
  font-size: $checkbox-label-font-size;
  line-height: $checkbox-size;
  margin: $checkbox-label-margin;
  white-space: normal;
  &:hover {
    cursor: pointer;
  }
  strong {
    font-weight: bold;
  }
}

// BEGIN SPECIAL STATES ---------- //

.disabled {
  .label:hover {
    cursor: default;
  }

  .check {
    border: 1px solid $checkbox-border-color-disabled;
    &:hover {
      cursor: default;
    }
  }

  .label {
    color: $checkbox-label-text-color-disabled;
  }
}

.checked {
  background-color: $checkbox-bg-color-checked;
  .check {
    background-color: $checkbox-check-bg-color;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    &:after {
      border-color: $checkbox-check-icon-color;
      border-style: solid;
      border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
      content: "";
      width: $checkbox-check-width;
      height: $checkbox-check-height;
      transform: rotate(45deg);
      margin-top: $checkbox-check-vertical-offset;
    }
  }
}

// END SPECIAL STATES ---------- //