/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */

@import "~@utrecht/focus-ring-css/src/mixin";

@mixin utrecht-custom-checkbox {
  /*
   * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
   */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: var(--utrecht-checkbox-size, 1em);
  border-color: var(--utrecht-checkbox-border-color);
  border-radius: var(--utrecht-checkbox-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-checkbox-border-width);
  cursor: var(--utrecht-action-activate-cursor, revert);
  inline-size: var(--utrecht-checkbox-size, 1em);
  margin-block-start: var(--utrecht-checkbox-margin-block-start);
  min-block-size: 24px;
  min-inline-size: 24px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  vertical-align: top;
}

@mixin utrecht-custom-checkbox--checked {
  background-color: var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
}

@mixin utrecht-custom-checkbox--disabled {
  &:checked {
    background-color: var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));
    border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
  }
  &:active {
    border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
  }

  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

@mixin utrecht-custom-checkbox--indeterminate {
  background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
}

@mixin utrecht-custom-checkbox--invalid {
  border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width));
}

@mixin utrecht-custom-checkbox--active {
  background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
  color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
}

@mixin utrecht-custom-checkbox--hover {
  background-color: var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));
  border-color: var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width));
}

@mixin utrecht-custom-checkbox--focus {
  @include utrecht-focus;

  background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
  border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
}

@mixin utrecht-custom-checkbox--focus-visible {
  @include utrecht-focus-visible;
}

@mixin utrecht-custom-checkbox--html-input {
  &:disabled {
    @include utrecht-custom-checkbox--disabled;
  }

  &:hover {
    @include utrecht-custom-checkbox--hover;
  }

  &:focus {
    @include utrecht-custom-checkbox--focus;
  }

  &:focus-visible {
    @include utrecht-custom-checkbox--focus-visible;
  }

  &:invalid,
  &[aria-invalid="true"] {
    @include utrecht-custom-checkbox--invalid;
  }

  &:active {
    @include utrecht-custom-checkbox--active;
  }

  &:checked {
    @include utrecht-custom-checkbox--checked;
  }

  &:indeterminate,
  &:checked:indeterminate {
    @include utrecht-custom-checkbox--indeterminate;
  }
}