/* This file contains styles for checkbox and radio inputs */
/* Normal state */
:where(input:is([type='checkbox'], [type='radio'])) {
  padding: 0;
  box-sizing: border-box;
  height: var(--space-4x);
  width: var(--space-4x);
  min-width: var(--space-4x);
  border-radius: var(--border-radius-primary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

:where(input[type='radio']) {
  border-radius: var(--border-radius-round);
}

/* Checked state */
:where(input:is([type='checkbox'], [type='radio']):checked) {
  border-color: var(--blue-600);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

:where(input[type='checkbox']:checked) {
  background: var(--blue-600)
    url('data:image/svg+xml;base64,PHN2ZwogICAgd2lkdGg9IjEwIgogICAgaGVpZ2h0PSIxMCIKICAgIHZpZXdCb3g9IjAgMCAxMCAxMCIKICAgIGZpbGw9Im5vbmUiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9ImV2ZW5vZGQiCiAgICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgICBkPSJNOS41ODUyIDAuMTc2Njc3QzkuMTQ0OTQgLTAuMTMyNDE4IDguNTM4MzYgLTAuMDI1NDYyNiA4LjIzMDM3IDAuNDE1NTdMMy4zMDcyOCA3LjQ2NTIzTDEuNzcwMTEgNS4yNjQwN0MxLjQ2MjExIDQuODIzMDMgMC44NTU1MzYgNC43MTYwOCAwLjQxNTI3NiA1LjAyNTE3Qy0wLjAyNDk4MzMgNS4zMzQyNyAtMC4xMzIyMDcgNS45NDIzNyAwLjE3NTc4NSA2LjM4MzRMMi40MDk1MSA5LjU4MkMyLjY2NjQzIDkuOTQ5ODkgMy4xMzEwOSAxMC4wODUzIDMuNTMzNjkgOS45NDA3M0MzLjgwODcxIDkuOTE1NTIgNC4wNzExNyA5Ljc3MzcgNC4yNDE4OSA5LjUyOTIzTDkuODI0NjkgMS41MzQ5QzEwLjEzMjcgMS4wOTM4NyAxMC4wMjU1IDAuNDg1NzczIDkuNTg1MiAwLjE3NjY3N1oiCiAgICAgIGZpbGw9IndoaXRlIgogICAgLz4KICA8L3N2Zz4=')
    no-repeat center;
}

:where(input[type='radio']:checked) {
  background-color: var(--blue-600);
  position: relative;
}

/* White dot */
input[type='radio']:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: var(--white);
  border-radius: var(--border-radius-round);
}

/* Hover checked */
:where(input:is([type='checkbox'], [type='radio']):is(:hover, .hover):checked) {
  border-color: var(--blue-800);
  background-color: var(--blue-800);
}

/* Focused checked */
:where(
    input:is([type='checkbox'], [type='radio']):is(
        :focus-visible,
        .focus-visible
      ):checked
  ) {
  border-color: var(--blue-800);
  background-color: var(--blue-800);
}

/* Active state */
:where(input:is([type='checkbox'], [type='radio']):is(:active, .active)) {
  border-color: var(--gray-700);
}
:where(
    input:is([type='checkbox'], [type='radio']):is(:active, .active):checked
  ) {
  background-color: var(--gray-700);
}

/* Disabled checked state */
:where(
    :is(input[type='checkbox'], [type='radio']):checked:is(:disabled, .disabled)
  ) {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

/* Labels */
:where(label:has(input:is([type='checkbox'], [type='radio']))) {
  display: flex;
  gap: var(--space-2x);
  align-items: center;
  width: fit-content;
}

:where(input:is([type='checkbox'], [type='radio']) + label) {
  vertical-align: middle;
  margin-left: var(--space-2x);
  width: fit-content;
}

/* Set cursors */
:where(input:is([type='checkbox'], [type='radio'])),
:where(input:is([type='checkbox'], [type='radio']) + label:hover),
:where(label:has(input:is([type='checkbox'], [type='radio']))):hover {
  cursor: pointer;
}

:where(input:is([type='checkbox'], [type='radio']):disabled),
:where(input:is([type='checkbox'], [type='radio']):disabled + label:hover),
:where(label:has(input:is([type='checkbox'], [type='radio']):disabled)):hover {
  cursor: not-allowed;
}

:where(select) {
  border-radius: var(--border-radius-primary);
  padding: var(--space-2x) var(--space-10x) var(--space-2x) var(--space-4x);
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 22px;
  background-image: url(https://smartcontract.imgix.net/icons/Caret.svg?auto=compress%2Cformat);
  background-position: right var(--space-3x) top 50%;
  background-repeat: no-repeat;
  cursor: pointer;
}