/*
 * Checkbox and radio
 *
 *
 */

@use 'sass:map';
@use 'sass:math';
@use '../abstracts/variables';
@use '../abstracts/functions';
@use '../abstracts/mixins/typography';

@function -font-size($style) {
  @return map.get(variables.$font-size, functions.map-deep-get(variables.$pkt-styles, $style, 'size'));
}

@function -line-height($style) {
  @return map.get(variables.$line-height, functions.map-deep-get(variables.$pkt-styles, $style, 'line-height'));
}

$-tile-control-height: 1.5rem;
$-tile-inline: var(--pkt-input-check-tile-padding-inline, 1rem);
$-tile-label-padding-block: calc(
  var(--pkt-input-check-tile-padding-block, 1rem) +
    (#{$-tile-control-height} - var(--pkt-input-check-label-line-height, 1.5rem)) / 2
);

@mixin -size($label, $helptext, $helptext-spacing, $tile-height, $tile-padding-inline) {
  --pkt-input-check-label-font-size: #{-font-size($label)};
  --pkt-input-check-label-line-height: #{-line-height($label)};
  --pkt-input-check-helptext-font-size: #{-font-size($helptext)};
  --pkt-input-check-helptext-line-height: #{-line-height($helptext)};
  --pkt-input-check-helptext-spacing: #{map.get(variables.$spacing, $helptext-spacing)};
  --pkt-input-check-tile-padding-block: #{math.div(
      map.get(variables.$spacing, $tile-height) - $-tile-control-height,
      2
    )};
  --pkt-input-check-tile-padding-inline: #{map.get(variables.$spacing, $tile-padding-inline)};
}

$check-medium-shape: polygon(
  74.075% 38.169%,
  43.741% 68.503%,
  25.906% 50.669%,
  30.325% 46.25%,
  43.741% 59.666%,
  69.656% 33.75%
);
$minus-sign-shape: polygon(25% 46.875%, 75% 46.875%, 75% 53.125%, 25% 53.125%);

pkt-checkbox,
pkt-radiobutton {
  display: block;
}

.pkt-input-check {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;

  &__input {
    --pkt-input-check-control-height: 1.5rem;
    display: flex;

    &:has(> &-checkbox[type='radio']) {
      --pkt-input-check-control-height: 1.25rem;
    }

    &:has(> &-checkbox[role='switch']) {
      --pkt-input-check-control-height: calc(1.5rem + 2px);
    }

    &-label {
      --pkt-input-check-control-size: 1.5rem;
      cursor: pointer;
      color: var(--pkt-color-text-body-default);
      margin-inline-start: calc(-1 * var(--pkt-input-check-control-size));
      padding-inline-start: calc(var(--pkt-input-check-control-size) + 0.5rem);
      @include typography.get-text-style('pkt-txt-16-light');
      font-size: var(--pkt-input-check-label-font-size, #{-font-size('pkt-txt-16-light')});
      line-height: var(--pkt-input-check-label-line-height, #{-line-height('pkt-txt-16-light')});
      padding-block-start: max(
        0px,
        calc(
          (
              var(--pkt-input-check-control-height) - var(
                  --pkt-input-check-label-line-height,
                  #{-line-height('pkt-txt-16-light')}
                )
            ) /
            2
        )
      );

      &--left {
        margin-inline-start: 0;
        margin-inline-end: calc(-1 * var(--pkt-input-check-control-size));
        padding-inline-start: 0;
        padding-inline-end: calc(var(--pkt-input-check-control-size) + 0.5rem);
      }
    }

    &-checkbox[type='radio'] + &-label {
      --pkt-input-check-control-size: 1.25rem;
    }

    &-checkbox[role='switch'] + &-label {
      --pkt-input-check-control-size: 2.5rem;
    }

    &:has(> &-checkbox[role='switch']) > &-label--left {
      --pkt-input-check-control-size: 2.5rem;
    }

    &-helptext {
      padding-block-start: var(--pkt-input-check-helptext-spacing, 0.5rem);
      max-width: 21.875rem;
      color: var(--pkt-color-text-body-default);
      @include typography.get-text-style('pkt-txt-14-light');
      font-size: var(--pkt-input-check-helptext-font-size, #{-font-size('pkt-txt-14-light')});
      line-height: var(--pkt-input-check-helptext-line-height, #{-line-height('pkt-txt-14-light')});
    }

    // Input states
    &:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
      color: var(--pkt-color-input-check-text-hover);
    }

    &-checkbox {
      appearance: none;
      position: relative;
      z-index: 1;
      margin-block-start: max(
        0px,
        calc(
          (
              var(--pkt-input-check-label-line-height, #{-line-height('pkt-txt-16-light')}) - var(
                  --pkt-input-check-control-height
                )
            ) /
            2
        )
      );
      cursor: pointer;
      background-color: var(--pkt-color-input-check-background);
      border: 2px solid var(--pkt-color-input-check-border);
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;

      &[type='checkbox'] {
        border-radius: 0;
      }

      &[type='checkbox'][role='switch'] {
        transition: all 0.15s ease-in-out;
        position: relative;
        height: calc(1.5rem + 2px);
        width: 2.5rem;
        border-radius: calc(0.75rem + 2px);
        &:before {
          transition: all 0.15s ease-in-out;
          content: '';
          position: absolute;
          z-index: 1;
          top: -1px;
          bottom: -1px;
          left: -1px;
          width: 1.5rem;
          border: 2px solid transparent;
          background-color: transparent;
          clip-path: $check-medium-shape padding-box;
        }
        &:after {
          transition: all 0.15s ease-in-out;
          display: block;
          content: '';
          border: 2px solid var(--pkt-color-input-check-border);
          background-color: var(--pkt-color-input-check-background);
          position: absolute;
          top: -1px;
          bottom: -1px;
          left: -1px;
          width: 1.5rem;
          border-radius: 0.75rem;
        }
      }

      &[type='radio'] {
        border-radius: 50%;
        border: none;
        width: 1.25rem;
        height: 1.25rem;
        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
      }

      // Checkbox states
      &:focus-visible:not(:disabled) + .pkt-input-check__input-label {
        color: var(--pkt-color-input-check-text-hover);
      }

      &[type='checkbox']:hover {
        --pkt-color-input-check-border: var(--pkt-color-input-border-hover);
      }

      &[type='checkbox']:active:not(:disabled) {
        --pkt-color-input-check-border: var(--pkt-color-input-border-active);
      }

      &[type='checkbox']:focus-visible {
        --pkt-color-input-check-border: var(--pkt-color-input-border-active);
        outline: 4px solid var(--pkt-color-border-states-focus);
        outline-offset: 0;
      }

      //Radio
      &[type='radio']:hover {
        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
        outline-color: var(--pkt-color-input-border-hover);
      }

      &[type='radio']:focus-visible {
        border: 3px solid var(--pkt-color-input-check-background);
        outline: none;
        box-shadow:
          0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
          0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
      }

      &:indeterminate {
        &[type='checkbox']:not([role='switch']) {
          position: relative;
          background-color: var(--pkt-color-input-border-normal);

          &:hover:not(:disabled) {
            background-color: var(--pkt-color-input-border-hover);
          }

          &:focus-visible:not(:disabled) {
            background-color: var(--pkt-color-input-border-active);
          }

          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
          }

          &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            background-color: var(--pkt-color-input-check-background);
            clip-path: $minus-sign-shape;
          }
        }
      }

      &:checked {
        // Checkbox and switch
        &[type='checkbox'] {
          position: relative;
          background-color: var(--pkt-color-input-border-normal);
        }

        // Checkbox
        &:not([role='switch']) {
          &[type='checkbox']:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
          }

          &[type='checkbox']:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            background-color: var(--pkt-color-input-check-background);
            clip-path: $check-medium-shape;
          }
        }

        // Switch
        &[role='switch'] {
          &:before,
          &:after {
            left: calc(100% + 1px);
            transform: translate(-100%, 0);
          }
          &:before {
            background-color: inherit;
          }
        }

        // Radio
        &[type='radio'] {
          background-color: var(--pkt-color-input-border-normal);
          border: 3px solid var(--pkt-color-input-check-background);
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
        }

        // Checked states
        &[type='checkbox']:focus-visible {
          background-color: var(--pkt-color-input-border-active);
        }

        &[type='checkbox']:hover {
          background-color: var(--pkt-color-input-border-hover);
        }

        &[type='radio']:focus-visible {
          background-color: var(--pkt-color-input-border-active);
          border: 3px solid var(--pkt-color-input-check-background);
          outline: none;
          box-shadow:
            0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
            0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
        }

        &[type='radio']:hover {
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
          background-color: var(--pkt-color-input-border-hover);
        }
      }

      // Disabled styles
      &:disabled {
        &[type='checkbox'] {
          background-color: var(--pkt-color-input-background-disabled);
          --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
          cursor: not-allowed;
          &[role='switch']:checked:before {
            background-color: var(--pkt-color-input-text-disabled);
          }
        }

        &[type='radio'] {
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
          background-color: var(--pkt-color-input-background-disabled);
          cursor: not-allowed;
          outline-color: var(--pkt-color-input-border-disabled);
        }
      }

      &:disabled:checked {
        &[type='checkbox'] {
          background-color: var(--pkt-color-input-border-disabled);
          --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
        }

        &[type='radio'] {
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
          background-color: var(--pkt-color-input-border-disabled);
        }
      }

      &:disabled:indeterminate {
        &[type='checkbox']:not([role='switch']) {
          background-color: var(--pkt-color-input-border-disabled);
          --pkt-color-input-check-border: var(--pkt-color-input-border-disabled);
        }
      }

      @at-root .pkt-input-check__input-label--disabled,
        &:disabled + .pkt-inputwrapper,
        &:disabled + .pkt-input-check__input-label {
        &,
        & .pkt-input-check__input-helptext {
          color: var(--pkt-color-input-text-disabled);
          cursor: not-allowed;
        }
      }

      //Modifiers checkbox and radio
      &--error {
        //Checkmark
        &[type='checkbox']:not([role='switch']):checked:after {
          background-color: var(--pkt-color-text-body-dark);
        }

        &[type='checkbox'],
        &[type='checkbox']:hover,
        &[type='checkbox']:focus-visible,
        &[type='checkbox']:checked,
        &[type='checkbox']:checked:focus-visible,
        &[type='checkbox']:checked:hover,
        &[type='checkbox']:active:not(:disabled),
        &:checked[type='checkbox']:checked:before {
          background-color: var(--pkt-color-surface-default-faded-red);
          --pkt-color-input-check-border: var(--pkt-color-input-border-error);
          outline-color: var(--pkt-color-input-border-error);
        }

        // Radio
        &[type='radio'],
        &[type='radio']:hover,
        &[type='radio']:focus-visible,
        &[type='radio']:hover,
        &[type='radio']:active:not(:disabled) {
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
          background-color: var(--pkt-color-surface-default-faded-red);
        }

        &[type='radio']:checked,
        &[type='radio']:checked:focus-visible,
        &[type='radio']:checked:hover,
        &[type='radio']:checked:focus-visible + .pkt-input-check__input--tile {
          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
          background-color: var(--pkt-color-input-border-active);
        }

        &[type='radio']:checked:hover,
        &[type='radio']:checked:focus-visible {
          background-color: var(--pkt-color-input-border-active);
        }
      }
    }

    // Modifiers input
    &--tile {
      border: 2px solid var(--pkt-color-border-subtle);
      width: 22.5rem;
      max-width: 100%;
      position: relative;

      & .pkt-input-check__input-label:before {
        content: '';
      }

      & > .pkt-input-check__input-label {
        flex-grow: 1;
        margin-block: -2px;
        margin-inline: calc(-1 * (var(--pkt-input-check-control-size) + #{$-tile-inline})) -2px;
        padding: $-tile-label-padding-block $-tile-inline $-tile-label-padding-block
          calc(var(--pkt-input-check-control-size) + #{$-tile-inline} + 1rem);
        width: 100%;
        font-weight: map.get(variables.$font-weight, 'medium');
      }

      & > .pkt-input-check__input-label--left {
        flex-grow: 1;
        margin-inline: -2px calc(-1 * (var(--pkt-input-check-control-size) + #{$-tile-inline}));
        padding: $-tile-label-padding-block calc(var(--pkt-input-check-control-size) + #{$-tile-inline} + 1rem)
          $-tile-label-padding-block $-tile-inline;
      }

      & > .pkt-input-check__input-checkbox {
        margin: calc(var(--pkt-input-check-tile-padding-block, 1rem) - 2px) 0
          calc(var(--pkt-input-check-tile-padding-block, 1rem) - 2px) calc(#{$-tile-inline} - 2px);
      }

      & > .pkt-input-check__input-label--left + .pkt-input-check__input-checkbox {
        margin-inline: 0 calc(#{$-tile-inline} - 2px);
      }

      & > .pkt-input-check__input-checkbox[type='radio'] {
        margin-block: var(--pkt-input-check-tile-padding-block, 1rem);
        margin-inline-start: $-tile-inline;
      }

      & > .pkt-input-check__input-checkbox[type='radio'] + .pkt-input-check__input-label {
        margin-inline-start: calc(-1 * (var(--pkt-input-check-control-size) + #{$-tile-inline} + 2px));
        padding-inline-start: calc(var(--pkt-input-check-control-size) + #{$-tile-inline} + 1rem + 4px);
      }

      & > .pkt-input-check__input-checkbox[role='switch'] {
        margin-block: calc(var(--pkt-input-check-tile-padding-block, 1rem) - 3px);
      }

      & .pkt-input-check__input-checkbox:checked:not(:disabled) + .pkt-input-check__input-label:before {
        content: '';
        position: absolute;
        left: -2px;
        right: -2px;
        bottom: -2px;
        top: -2px;
        border: 2px solid var(--pkt-color-border-default);
        pointer-events: none;
      }

      /* TODO - Wait on firefox-support!
      &:has(:checked) {
        border-color: var(--choice-checked-rb-bc);
      }*/
      // Tile states
      &:focus-within {
        background-color: var(--pkt-color-input-background-normal);
        border-color: var(--pkt-color-border-states-active);
      }

      &:has(:focus-visible) {
        outline: 4px solid var(--pkt-color-border-states-focus);
      }

      &:hover:not(.pkt-input-check__input--tile-disabled) {
        border-color: var(--pkt-color-border-states-hover);
      }

      &:hover > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
        border-color: var(--pkt-color-border-states-hover);
      }

      &:active:not(:disabled) > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
        border-color: var(--pkt-color-border-states-active);
      }

      &:disabled {
        border-color: var(--pkt-color-border-states-disabled);
      }

      .pkt-input-check__input-checkbox:not(
          .pkt-input-check__input-checkbox--error
        ):checked[type='radio']:focus-visible {
        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
      }

      .pkt-input-check__input-checkbox[type='checkbox']:focus-visible {
        outline: none;
      }
    }
  }
}

.pkt-inputwrapper--medium,
.pkt-input-check--medium {
  @include -size('pkt-txt-16-light', 'pkt-txt-14-light', 'size-8', 'size-56', 'size-16');
}

.pkt-inputwrapper--small,
.pkt-input-check--small {
  @include -size('pkt-txt-14-light', 'pkt-txt-12-light', 'size-4', 'size-48', 'size-12');
}

.pkt-inputwrapper--xsmall,
.pkt-input-check--xsmall {
  @include -size('pkt-txt-14-light', 'pkt-txt-12-light', 'size-4', 'size-40', 'size-12');
}

[data-mode='dark'] .pkt-input-check {
  &__input-checkbox[type='checkbox']:not([role='switch']):after {
    background-color: var(--pkt-color-text-body-dark);
  }
  &__input-checkbox[type='checkbox'][role='switch'] {
    &:disabled:checked {
      &:before {
        background-color: var(--pkt-color-input-border-disabled);
      }
      &:after {
        border-color: var(--pkt-color-input-border-disabled);
      }
    }
    &:disabled:not(:checked) {
      background-color: transparent;
    }
  }
  &__input-checkbox--error[type='checkbox'][role='switch']:is(input) {
    &,
    &:checked:checked {
      // Double `:checked` is to add a level of specificity to the selector
      background-color: var(--pkt-color-surface-default-faded-red);
      border-color: var(--pkt-color-input-border-error);
    }
  }
}