@use '../../abstract' as *;

[type="checkbox"],
[type="radio"] {
  $size:              pxToRem(20);
  --p-size:           #{$size};
  --p-icon-size:      calc(var(--p-size) * 0.85);

  /* Theme Light */
  --p-icon-color:     var(--p-icon-color-default);
  --p-bg-color:       var(--p-bg-color-default);
  --p-border-color:   var(--p-border-color-default);

  --p-icon-color-default:     var(--color-neutral-0);
  --p-bg-color-default:       var(--color-neutral-0);
  --p-border-color-default:   var(--color-neutral-20);

  --p-bg-color-checked: var(--color-information-100);
  --p-border-color-checked: var(--color-information-100);

  --p-bg-color-hover: var(--color-neutral-5);
  --p-border-color-hover:var(--color-neutral-20);

  --p-bg-color-hover-checked: var(--color-information-100);
  --p-border-color-hover-checked: var(--color-information-100);

  --p-bg-color-indeterminate: var(--color-information-100);
  --p-border-color-indeterminate: var(--color-information-100);

  --p-bg-color-active: var(--color-neutral-0);
  --p-border-color-active: var(--color-information-120);

  --p-bg-color-active-checked: var(--color-information-120);
  --p-border-color-active-checked: var(--color-information-120);

  --p-bg-color-disabled: var(--color-neutral-10);
  --p-border-color-ddisabled: var(--color-neutral-15);

  --p-icon-color-disabled-checked: var(--color-neutral-0);
  --p-bg-color-disabled-checked: var(--color-neutral-15);
  --p-border-color-disabled-checked: var(--color-neutral-15);
/* End theme variables */

  display:inline-grid; place-content:center; flex-shrink:0;
  inline-size:var(--p-size); block-size:var(--p-size);
  background:hsl(var(--p-bg-color)); border:solid pxToRem(1) hsl(var(--p-border-color));
  color:hsl(var(--p-icon-color)); vertical-align:middle; cursor:pointer;

  &.is-small  { $size:pxToRem(16); --p-size:#{$size}; }
  &.is-large { $size:pxToRem(24); --p-size:#{$size}; }
  //&:where(:disabled)  { opacity:0.5; filter:grayscale(1); }

  &:where(:focus)     {
    $focus: 0 0 0 pxToRem(1) hsl(var(--color-information-100)), 0 0 0 pxToRem(2) hsl(var(--color-information-100) / 0.25);
    --focus-box-shadow: #{$focus};
  }

  &:where(:checked)   {
    --p-bg-color:     var(--p-bg-color-checked);
    --p-border-color: var(--p-border-color-checked);
  }

  &:where(:hover)     {
    --p-bg-color:     var(--p-bg-color-hover);
    --p-border-color: var(--p-border-color-hover);
    &:where(:checked) {
      --p-bg-color:     var(--p-bg-color-hover-checked);
      --p-border-color: var(--p-border-color-hover-checked);
    }
  }
  &:where(:indeterminate) {
    --p-bg-color:     var(--p-bg-color-indeterminate);
    --p-border-color: var(--p-border-color-indeterminate);
  }
  &:where(:active)    {
    --p-bg-color:     var(--p-bg-color-active);
    --p-border-color: var(--p-border-color-active);
    &:where(:checked) {
      --p-bg-color:     var(--p-bg-color-active-checked);
      --p-border-color: var(--p-border-color-active-checked);
    }
  }
  &:where(:disabled)  {
    --p-bg-color:     var(--p-bg-color-disabled);
    --p-border-color: var(--p-border-color-ddisabled);
    cursor: initial;
    &:where(:checked) {
      --p-icon-color:   var(--p-icon-color-disabled-checked);
      --p-bg-color:     var(--p-bg-color-disabled-checked);
      --p-border-color: var(--p-border-color-disabled-checked);
    }
  }

  /* Theme Dark */
  #{$theme-dark} & {
    --p-bg-color-disabled: var(--color-neutral-80);
    --p-border-color-ddisabled: var(--color-neutral-70);

    --p-icon-color-disabled-checked: var(--color-neutral-60);
    --p-bg-color-disabled-checked: var(--color-neutral-80);
    --p-border-color-disabled-checked: var(--color-neutral-80);
  }
}


[type="radio"] {
  position:relative; border-radius:var(--border-radius-circular);
  &:where(:checked) {
    padding:calc(var(--p-size) * 0.2);
    &::before {
      content:""; display:block;
      position:absolute; inset:30%;
      background-color:hsl(var(--p-icon-color)); border-radius:var(--border-radius-circular);
    }
  }
}
[type="checkbox"] {
  border-radius: var(--border-radius-xsmall);
  &:where(:indeterminate) {
    &::after {
      content:""; display:block; inline-size:pxToRem(10); block-size:pxToRem(2); border-radius:pxToRem(1);
      background-color:hsl(var(--color-neutral-0));
    }

  }
  &:where(:checked) {
    &::before {
      font-family: 'icon' !important;
      content: var(--icon-check);
      vertical-align: middle;
      margin-bottom:  calc(var(--p-size) / 8 * -1);
      font-size:      var(--p-icon-size);
    }
  }
  &:where(:not(:checked)) {
    &::before { display:none; }
  }
}

.checkboxes {
  &-header  { display:flex; justify-content:space-between; }
  &-options { display:flex; gap:pxToRem(10); font-size:pxToRem(13); }
  &-list    { display:grid; grid-template-columns:repeat(2, 1fr); gap:pxToRem(30);}
  &-item    {
    :where([type="checkbox"], [type="radio"]) { margin-inline-end:pxToRem(10); }
  }
}

.radio-button {
  all:unset;

  --p-radio-bitton-text-color:            var(--p-radio-bitton-text-color-default);
  --p-radio-bitton-bg-color:              var(--p-radio-bitton-bg-color-default);
  --p-radio-bitton-border-color:          var(--p-radio-bitton-border-color-default);

  --p-radio-bitton-text-color-default:    var(--color-neutral-60);
  --p-radio-bitton-bg-color-default:      var(--color-neutral-5);
  --p-radio-bitton-border-color-default:  var(--color-neutral-15);

  --p-radio-bitton-text-color-checked:    var(--p-radio-bitton-text-color-default);
  --p-radio-bitton-bg-color-checked:      var(--color-neutral-15);
  --p-radio-bitton-border-color-checked:  var(--p-radio-bitton-border-color-default);

  color: hsl(var(--p-radio-bitton-text-color));
  background-color: hsl(var(--p-radio-bitton-bg-color));
  border: solid pxToRem(1) hsl(var(--p-radio-bitton-border-color));

  display:grid; place-content:center; box-sizing:border-box; padding:0;
  inline-size:pxToRem(33); block-size:pxToRem(36); border-radius:var(--border-radius-small);
  font-weight:bold; cursor:pointer; transition:var(--transition);

  &::before { content: attr(data-text); }

  &:where(:hover) {
    scale:1.1;
  }
  &:where(:focus-visible) {
    box-shadow:var(--focus-box-shadow); scale:1.1;
  }
  &:where(:checked) {
    &::before { position:initial; background:initial; } /* overrides default radio */
    --p-radio-bitton-text-color:            var(--p-radio-bitton-text-color-checked);
    --p-radio-bitton-bg-color:              var(--p-radio-bitton-bg-color-checked);
    --p-radio-bitton-border-color:          var(--p-radio-bitton-border-color-checked);
  }

  #{$theme-dark} & {
    --p-radio-bitton-text-color-default:    var(--color-neutral-20);
    --p-radio-bitton-bg-color-default:      var(--color-neutral-85);
    --p-radio-bitton-border-color-default:  var(--color-neutral-80);

    --p-radio-bitton-text-color-checked:    var(--p-radio-bitton-text-color-default);
    --p-radio-bitton-bg-color-checked:      var(--color-neutral-80);
    --p-radio-bitton-border-color-checked:  var(--color-neutral-60);
  }
}

.image-radio {
  display:flex; flex-direction:column; gap:pxToRem(12); cursor:pointer;
  [type="radio"] { display:block; margin-inline:auto; }
}

.choice-item {
  --p-choice-item-title-color: var(--color-neutral-70);
  --p-choice-item-text-color: var(--color-neutral-60);
  display:flex; gap:pxToRem(8);
  &-content { display:flex; flex-direction:column; gap:pxToRem(4); line-height:1.5; }
  &-title { color:hsl(var(--p-choice-item-title-color)); font-weight:600;}
  &-paragraph { color:hsl(var(--p-choice-item-text-color)); }

  #{$theme-dark} & {
    --p-choice-item-title-color: var(--color-neutral-10);
    --p-choice-item-text-color: var(--color-neutral-20);
  }
}