// this style sheet contains styles for the checkbox-box
// that needs to be shared between OnyxCheckbox and OnyxSelect
@use "layers";

@mixin variables() {
  --onyx-checkbox-input-size: 1rem;
  --onyx-checkbox-input-padding: var(--onyx-density-sm);
}

@mixin define-checked-background($state, $color) {
  &#{$state} {
    border-color: var(--onyx-color-component-cta-#{$color});
    background-color: var(--onyx-color-component-cta-#{$color});

    &:hover {
      background-color: var(--onyx-color-component-cta-#{$color}-hover);
    }
  }
}

@mixin styles() {
  height: var(--onyx-checkbox-input-size);
  width: var(--onyx-checkbox-input-size);
  appearance: none;
  margin: 0;
  border-radius: var(--onyx-radius-sm);
  outline: none;
  cursor: inherit;
  border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
  background: var(--onyx-color-base-background-blank);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  &:checked,
  &:indeterminate {
    @include define-checked-background(":enabled", default);
    @include define-checked-background(":user-invalid", danger);

    &:disabled {
      background-color: var(--onyx-color-base-neutral-300);
    }
  }

  &:disabled {
    border-color: var(--onyx-color-base-neutral-300);
  }

  &:user-invalid {
    border-color: var(--onyx-color-component-border-danger);
  }

  &:checked {
    // used onyx icon (but converted to clip-path): check-small.svg
    &::after {
      content: " ";
      background-color: var(--onyx-color-text-icons-neutral-inverted);
      width: 100%;
      height: 100%;
      display: block;
      clip-path: polygon(66.6% 33.7%, 40.7% 59.6%, 30.4% 49.3%, 26% 53.7%, 40.7% 68.4%, 71% 38.1%);
    }
  }

  &:indeterminate {
    // used onyx icon (but converted to clip-path): minus-small.svg
    &::after {
      content: " ";
      background-color: var(--onyx-color-text-icons-neutral-inverted);
      width: 100%;
      height: 100%;
      display: block;
      clip-path: polygon(25% 46.9%, 75% 46.9%, 75% 53.1%, 25% 53.1%);
    }
  }
}