@use "@tedi-design-system/core/bootstrap-utility/breakpoints";

$focus-ring:
  0 0 0 var(--tedi-borders-01)
    var(--general-effect-colors-focus-outset-inner-shadow),
  0 0 0 var(--tedi-borders-03)
    var(--general-effect-colors-focus-outset-outer-shadow);
$selected-border-inset: calc(
  var(--general-border-width-selected) - var(--tedi-borders-01)
);

input[tedi-checkbox][type="checkbox"] {
  --_checkbox-icon-size: 1.125rem;
  --_checkbox-bg: var(--form-choice-checkbox-unselected-default);
  --_checkbox-border: var(--form-choice-checkbox-unselected-border-default);
  --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-default);
  --_checkbox-inset: 0 0 0 0 transparent;
  --_checkbox-ring: 0 0 0 0 transparent;

  position: relative;
  width: var(--form-checkbox-radio-size-responsive);
  min-width: var(--form-checkbox-radio-size-responsive);
  height: var(--form-checkbox-radio-size-responsive);
  padding: 0;
  margin: 0;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
  background-color: var(--_checkbox-bg);
  border: var(--tedi-borders-01) solid var(--_checkbox-border);
  border-radius: var(--form-checkbox-radio-indicator-radius-checkbox);
  box-shadow: var(--_checkbox-inset), var(--_checkbox-ring);

  @include breakpoints.media-breakpoint-up(sm) {
    --_checkbox-icon-size: 1rem;
  }

  // Unselected
  &:not(:disabled, :checked, :indeterminate):hover {
    --_checkbox-border: var(--form-choice-checkbox-unselected-border-hover);
    --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
      var(--_checkbox-border);
  }

  &:not(:disabled, :checked, :indeterminate):active {
    --_checkbox-border: var(--form-choice-checkbox-unselected-border-active);
    --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
      var(--_checkbox-border);
  }

  &:focus-visible:not(:disabled) {
    --_checkbox-ring: #{$focus-ring};

    outline: none;
  }

  &:focus-visible:not(:disabled, :checked, :indeterminate) {
    --_checkbox-border: var(--form-choice-checkbox-unselected-border-focus);
  }

  &:disabled:not(:checked, :indeterminate) {
    --_checkbox-bg: var(--form-choice-checkbox-unselected-disabled);
    --_checkbox-border: var(--form-choice-checkbox-unselected-border-disabled);

    cursor: not-allowed;
  }

  // Selected
  &:checked,
  &:indeterminate {
    --_checkbox-bg: var(--form-choice-checkbox-selected-default);
    --_checkbox-border: var(--form-choice-checkbox-selected-border-default);

    &:not(:disabled):hover {
      --_checkbox-bg: var(--form-choice-checkbox-selected-hover);
      --_checkbox-border: var(--form-choice-checkbox-selected-border-hover);
      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-hover);
    }

    &:not(:disabled):active {
      --_checkbox-bg: var(--form-choice-checkbox-selected-active);
      --_checkbox-border: var(--form-choice-checkbox-selected-border-active);
      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-active);
    }

    &:focus-visible:not(:disabled, :hover, :active) {
      --_checkbox-border: var(--form-choice-checkbox-selected-border-focus);
    }

    &:disabled {
      --_checkbox-bg: var(--form-choice-checkbox-selected-disabled);
      --_checkbox-border: var(--form-choice-checkbox-selected-border-disabled);
      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-disabled);

      cursor: not-allowed;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      font-family: "Material Symbols Outlined", sans-serif;
      font-size: var(--_checkbox-icon-size);
      line-height: 1;
      color: var(--_checkbox-icon);
      content: "check";
      transform: translate(-50%, -50%);
      -webkit-font-smoothing: antialiased;
    }
  }

  &:checked {
    &::before {
      content: "check";
    }
  }

  &:indeterminate {
    &::before {
      content: "remove";
    }
  }

  // Error (selected state keeps its regular colors)
  &:not(:checked, :indeterminate, :disabled).tedi-checkbox--invalid,
  &:not(:checked, :indeterminate, :disabled):user-invalid,
  &:not(:checked, :indeterminate, :disabled).ng-invalid.ng-touched {
    --_checkbox-border: var(--form-choice-checkbox-unselected-border-error);

    &:hover,
    &:active {
      --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
        var(--_checkbox-border);
    }
  }

  &.tedi-checkbox--large {
    --_checkbox-icon-size: 1.125rem;

    width: var(--form-checkbox-radio-size-large);
    height: var(--form-checkbox-radio-size-large);
  }
}

label:has(input[tedi-checkbox]:not(:disabled)) {
  cursor: pointer;
}

label:has(input[tedi-checkbox]:disabled) {
  cursor: not-allowed;
}

label:has(input[tedi-checkbox]) + tedi-feedback-text {
  padding-left: var(--form-checkbox-radio-size-responsive);
  margin-left: var(--form-checkbox-radio-inner-spacing);
}