/* ════════════════════════════════════════
   Liquid Toggle — Jhey의 컴포넌트를 사이트에 통합
   원본 CSS에서 data-* 셀렉터를 버튼 자체로 스코핑.
   demo/debug 레이어 제거.
════════════════════════════════════════ */

@layer toggle-transitions, liquid-toggle;

@layer toggle-transitions {
  :root {
    --lt-transition: 0.2s;
    --lt-ease: ease-out;
  }

  /* bounce 이징 (drag/active 상태에서 적용) */
  .liquid-toggle[data-bounce='true']:has(:is(:active, [data-pressed='true'])) {
    --lt-transition: 0.6s;
    --lt-ease: linear(
      0 0%, 0.6091 3.69%, 1.0259 7.24%, 1.1733 9.05%, 1.283 10.92%,
      1.3562 12.87%, 1.3948 14.95%, 1.4014 16.03%, 1.3999 17.16%,
      1.3731 19.64%, 1.3202 22.27%, 1.1394 29.39%, 1.0582 33.17%,
      0.9943 37.45%, 0.9734 39.64%, 0.9593 41.92%, 0.9505 45.08%,
      0.9517 48.7%, 0.9924 63.02%, 1.0046 71.2%, 1.0061 78.24%, 1 100%
    );
  }

  .liquid-toggle[data-pressed='true'] .liquid__track {
    min-height: 30px;
  }

  .liquid-toggle .indicator--masked .mask {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 60cqi - (0 * var(--border)))
      ) -50%;
    transition-property: height, width, margin, scale;
    transition-duration: var(--lt-transition);
    transition-timing-function: var(--lt-ease);
    will-change: height, width, margin;
  }

  .liquid-toggle .wrapper {
    clip-path: inset(0 0 0 0 round 100px);
    filter: blur(6px);
    transition: filter var(--lt-transition) var(--lt-ease);
  }

  .liquid-toggle[aria-pressed='true']:not([data-active='true']) .liquid__track {
    left: calc(var(--border) * 6);
  }

  .liquid-toggle .liquid__track {
    left: 0;
    transition-property: height, width, filter, left;
    transition-duration: var(--lt-transition);
    transition-timing-function: var(--lt-ease);
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (6 * var(--border)))
      ) -50%;
  }

  .liquid-toggle[data-mapped='false'] .liquid__track {
    transition-property: height, width, filter, left, background;
    transition-duration: var(--lt-transition), var(--lt-transition),
      var(--lt-transition), var(--lt-transition), calc(var(--lt-transition) * 0.5);
    transition-timing-function: var(--lt-ease), var(--lt-ease), var(--lt-ease),
      var(--lt-ease), ease-out;
  }

  .liquid-toggle .indicator__liquid {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (2 * var(--border)))
      ) -50%;
    transition-property: scale;
    transition-duration: var(--lt-transition);
    transition-timing-function: var(--lt-ease);
  }

  .liquid-toggle .indicator__liquid :is(.cover, .shadow) {
    transition: opacity var(--lt-transition) var(--lt-ease);
  }

  /* active/press 상태 — 크기 부풀리기 */
  .liquid-toggle[data-active='true'] .indicator--masked .mask,
  .liquid-toggle:active .indicator--masked .mask {
    height: calc((100% - (2 * var(--border))) * (1.65 - (var(--delta, 0) * 0.025)));
    width: calc((60% - (2 * var(--border))) * (1.65 + (var(--delta, 0) * 0.025)));
    margin-left: calc((60% - (2 * var(--border))) * ((.65 + (var(--delta, 0) * 0.025)) * -0.5));
  }

  .liquid-toggle[data-active='true'] .indicator__liquid,
  .liquid-toggle:active .indicator__liquid {
    scale: calc(1.65 + (var(--delta, 0) * 0.025)) calc(1.65 - (var(--delta, 0) * 0.025));
  }

  .liquid-toggle[data-active='true'] .wrapper,
  .liquid-toggle:active .wrapper { filter: blur(0px); }

  .liquid-toggle[data-active='true'] .indicator__liquid .shadow,
  .liquid-toggle:active .indicator__liquid .shadow { opacity: 1; }

  .liquid-toggle[data-active='true'] .indicator__liquid .cover,
  .liquid-toggle:active .indicator__liquid .cover { opacity: 0; }

  .liquid-toggle[data-active='true'] .indicator__liquid .liquid__track,
  .liquid-toggle:active .indicator__liquid .liquid__track {
    left: calc(var(--border) * 3);
    height: calc((var(--height) * 1px) - (6 * var(--border)));
  }
}

@layer liquid-toggle {
  /* 색상 계산 */
  .liquid-toggle[data-mapped='false'] {
    --progress: round(down, var(--complete), 85);
    --lt-checked: hsl(
      var(--hue, 144),
      calc((8 + (var(--progress) / 85 * 92)) * 1%),
      calc((81 - (var(--progress) / 85 * 38)) * 1%)
    );
    .indicator, .indicator--masked {
      transition: background calc(var(--lt-transition) * 0.5) ease-out;
    }
    .liquid__shadow {
      transition: box-shadow calc(var(--lt-transition) * 0.5) ease-out;
    }
  }

  /* 버튼 베이스 */
  .liquid-toggle {
    --lt-unchecked: hsl(218, 8%, 81%);
    --lt-checked: hsl(
      var(--hue, 144),
      calc((8 + (var(--complete) / 100 * 92)) * 1%),
      calc((81 - (var(--complete) / 100 * 38)) * 1%)
    );
    --lt-control: hsl(300, 100%, 100%);
    --border: 5px;
    --width: 100;
    --height: 44;
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    border-radius: 100px;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: visible;
    container-type: inline-size;
    background: transparent;
    transition: outline var(--lt-transition) var(--lt-ease);
    outline-offset: 2px;
    flex-shrink: 0;
  }

  .liquid-toggle:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--lt-checked), #0000 20%);
  }
  .liquid-toggle:active { outline: none; }
  .liquid-toggle[data-active='true']:focus-visible { outline: 3px solid transparent; }

  /* track 배경 */
  .liquid-toggle .indicator {
    border-radius: 100px;
    pointer-events: none;
    height: 100%;
    width: 100%;
    background: var(--lt-checked);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  /* knockout (검은 원을 잘라내는 레이어) */
  .liquid-toggle .knockout {
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    border-radius: 100px;
    filter: url(#remove-black);
    position: absolute;
    inset: 0;
    will-change: filter, scale;
    transform: translate3d(0, 0, 0);
  }

  .liquid-toggle .indicator--masked {
    background: var(--lt-checked);
    z-index: 12;
    height: 100%;
    width: 100%;
    translate: -50% -50%;
    container-type: inline-size;

    .mask {
      position: absolute;
      height: calc(100% - (2 * var(--border)));
      width: calc(60% - (2 * var(--border)));
      top: 50%;
      background: #000;
      left: var(--border);
      border-radius: 100px;
    }
  }

  /* 블러 클립 래퍼 */
  .liquid-toggle .wrapper {
    position: absolute;
    inset: 0;
    border-radius: 100px;
  }

  /* goo 필터 내부 */
  .liquid-toggle .liquids {
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, 0);
    border-radius: 100px;
    overflow: hidden;
    filter: url(#goo);

    .liquid__shadow {
      position: absolute;
      inset: 0;
      box-shadow:
        inset 0 0 3px 4px var(--lt-checked),
        inset calc(((var(--complete) / 100) * 8px) + -4px) 0 3px 4px var(--lt-checked);
      border-radius: 100px;
    }

    .liquid__track {
      height: calc(var(--height) * 1px);
      width: calc(var(--width) * 1px);
      background: var(--lt-checked);
      border-radius: 100px;
      position: absolute;
      top: 50%;
    }
  }

  /* 움직이는 원형 knob */
  .liquid-toggle .indicator__liquid {
    position: absolute;
    height: calc(100% - (2 * var(--border)));
    width: calc(60% - (2 * var(--border)));
    container-type: inline-size;
    top: 50%;
    background: transparent;
    left: var(--border);
    border-radius: 100px;

    .shadow {
      opacity: 0;
      position: absolute;
      inset: 0;
      border-radius: 100px;
      box-shadow:
        1px -1px 2px hsl(0 0% 100% / 0.5) inset,
        0 -1px 2px hsl(0 0% 100% / 0.5) inset,
        -1px -1px 2px hsl(0 0% 100% / 0.5) inset,
        1px 1px 2px hsl(0 0% 30% / 0.5) inset,
        -8px 4px 10px -6px hsl(0 0% 30% / 0.25) inset,
        -1px 1px 6px hsl(0 0% 30% / 0.25) inset,
        -1px -1px 8px hsl(0 0% 60% / 0.15),
        1px 1px 2px hsl(0 0% 30% / 0.15),
        2px 2px 6px hsl(0 0% 30% / 0.15),
        -2px -1px 2px hsl(0 0% 100% / 0.25) inset,
        3px 6px 16px -6px hsl(0 0% 30% / 0.5);
      z-index: 20;
    }

    .cover {
      position: absolute;
      inset: 0;
      background: white;
      border-radius: 100px;
    }
  }
}