/* 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;

/* Give these custom properties types to allow them to be animated */
@property --bk-switch-pos { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --bk-switch-track-color { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bk-switch-thumb-color { syntax: '<color>'; inherits: true; initial-value: transparent; }

@layer baklava.components {
  .bk-switch {
    @include bk.component-base(bk-switch);
    
    --bk-switch-track-color: #{bk.$theme-switch-slider-off};
    --bk-switch-thumb-color: #{bk.$theme-switch-knob-off};
    
    --w: 34px; // Track width
    --h: 14px; // Track height
    --r: 10px; // Thumb radius
    --pos-start: var(--r);
    --pos-end: calc(100% - var(--r));
    --bk-switch-pos: var(--pos-start);
    
    flex: none;
    cursor: pointer;
    
    appearance: none;
    block-size: calc(var(--r) * 2);
    inline-size: calc(var(--w) + 6px); // Add a little bit of extra width so that the thumb overflows the track
    border-radius: var(--r);
    
    // Render the track (using circles to emulate a capsule shape)
    // Note: add `1px` difference between the stops so that we have a subtle antialiasing
    $col: var(--bk-switch-track-color);
    $a: calc(1px / var(--bk-device-pixel-ratio, 1)); // Antialias
    background:
      // https://css-tricks.com/drawing-images-with-css-gradients
      linear-gradient($col, $col) 50% 50% / calc(var(--w) - var(--h)) calc(var(--h)) no-repeat,
      radial-gradient(circle at var(--r), $col calc(var(--h) / 2 - $a), transparent calc(var(--h) / 2 + $a)),
      radial-gradient(circle at calc(100% - var(--r)), $col calc(var(--h) / 2 - $a), transparent calc(var(--h) / 2 + $a));
    // Render the thumb
    border-image:
      radial-gradient(circle at var(--bk-switch-pos),
        var(--bk-switch-thumb-color) calc(var(--r) - $a),
        transparent calc(var(--r) + $a)
      ) fill 0 / 1 / 0;
    
    &:checked {
      --bk-switch-track-color: #{bk.$theme-switch-slider-default};
      --bk-switch-thumb-color: #{bk.$theme-switch-knob-default};
      --bk-switch-pos: var(--pos-end);
    }
    &:disabled {
      --bk-switch-track-color: #{bk.$theme-switch-slider-off};
      --bk-switch-thumb-color: #{bk.$theme-switch-knob-disabled};
    }
    
    @media (prefers-reduced-motion: no-preference) {
      transition: none 200ms ease-out;
      transition-property: --bk-switch-pos, --bk-switch-track-color, --bk-switch-thumb-color;
    }
  }
}
