/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../../styling/defs.scss' as bk;

@mixin bk-checkbox-checkmark {
  &::after {
    inline-size: 42%;
    block-size: 68%;
    margin-block-start: 0;
    border-inline-end: bk.rem-from-px(2) solid currentColor;
    border-block-end: bk.rem-from-px(2) solid currentColor;
    transform: translate(0, -15%) scaleY(.95) rotate(44deg);
  }
}

@mixin bk-checkbox-dash {
  &::after {
    inline-size: 60%;
    block-size: 0;
    margin-block-start: 0;
    border-block-start: bk.rem-from-px(2) solid currentColor;
  }
}

@layer baklava.components {
  .bk-checkbox-labeled {
    @include bk.component-base(bk-checkbox-labeled);
    
    &.bk-checkbox-labeled--disabled, fieldset:disabled & {
      cursor: not-allowed;
      color: bk.$theme-text-label-disabled;
    }
  }
  
  .bk-checkbox {
    @include bk.component-base(bk-checkbox);
    
    $bk-checkbox-transition-duration: 120ms;
    
    flex-shrink: 0;
    cursor: pointer;
    
    appearance: none; // Disable native user agent appearance
    inline-size: bk.$spacing-5;
    aspect-ratio: 1;
    
    background: transparent;
    border: bk.rem-from-px(1) solid bk.$theme-checkbox-border-default;
    border-radius: bk.$radius-1;
    
    &:is(:checked, :global(.pseudo-checked)), &:indeterminate {
      border: none;
      background-color: bk.$theme-checkbox-background-default;
      background-position: center;
      background-repeat: no-repeat;
    }
    &:not(:is(:disabled, :global(.pseudo-disabled))):active {
      scale: 0.95; // Give the checkbox a subtle bounce effect when pressing down
    }
    
    &:is(:disabled, :global(.pseudo-disabled)) {
      cursor: not-allowed;
      background-color: transparent;
      border-color: bk.$theme-checkbox-border-disabled;
      color: bk.$theme-checkbox-checkmark-disabled;
      
      &:is(:checked, :global(.pseudo-checked)), &:indeterminate {
        background-color: bk.$theme-checkbox-background-non-active;
      }
    }
    
    @media (prefers-reduced-motion: no-preference) {
      transition: none $bk-checkbox-transition-duration ease-out;
      transition-property: scale, background-color, border-color;
    }
    
    //
    // Draw the checkmark
    //
    
    display: inline-grid;
    color: bk.$theme-checkbox-checkmark-default;
    
    &::after {
      content: '';
      place-self: center;
      display: block;
      margin-block-start: -25%; // Transition: start from top and move to center on activation
      
      @media (prefers-reduced-motion: no-preference) {
        transition: margin-block-start $bk-checkbox-transition-duration ease-out;
      }
    }
    &:is(:checked, :global(.pseudo-checked)):not(:indeterminate) { @include bk-checkbox-checkmark; }
    &:indeterminate { @include bk-checkbox-dash; }
  }
}
