/*┌────────────────────────────────────────────────────┐
  │ KRAFT STEAM Elements                               │
  │ COPYRIGHT (c) 2026 Pedro Luis Barrio. BITaMinD R+D │
  │ ALL RIGHTS RESERVED.                               │
  └────────────────────────────────────────────────────┘ */

.input, .btn, .switch, .slider {
	font-family    : var(--font);
	transition     : all 0.2s ease;
	align-items    : center;
} 

.input {
  width          : 100%;
	padding        : 10px 12px;
	background     : var(--surface);
	border         : 1px solid var(--border);
	border-radius  : var(--radius);
	color          : var(--text);
	font-size      : 1.2rem;
	box-sizing     : border-box; /* ¡Indispensable! */
	outline        : none;
}

/* buttons */
.btn {  
  font-size      : 1rem;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  cursor         : pointer;
  border         : 1px solid var(--border);
  border-radius  : var(--radius);
  background     : transparent;
  text-decoration: none;
  color          : var(--text);
  padding        : 0.6rem 1.2rem;
  justify-content: center;
}

.btn.selector {
}
  
.btn.action {
  font-size      : 1.2rem;
  letter-spacing : 0.06em;
  display        : flex;
  width          : 100%;
  padding        : 10px;
  border         : 1px solid var(--accent);
}

.btn.close {
  width          : fit-content;
  padding        : 6px 12px;
	position       : absolute;
	top            : 4px;
	right          : 4px;
}

.btn:disabled {
  opacity        : 0.3; 
  cursor         : not-allowed; 
}

.btn:hover {
  border-color   : var(--accent);
  color          : var(--accent);
  background     : var(--track);
}  

.btn.active {
  background     : var(--accent);
  color          : var(--bg);
} 

/* BOOLEAN-SWITCH
   ───────────────

   [O  ]   Binary On/Off switch
   [  O]   It uses a hidden Checkbox
   "State transition is handled via the :checked selector."
   ─────────────────────────────────────────────*/

.switch {
  position    : relative;
  display     : inline-block;
  height      : 1.6rem;
  width       : 2.8rem;
  margin-left : auto;
}

/* hidden real checkbox */
.switch input {
  opacity     : 0;
  width       : 0;
  height      : 0;
}

/* switch track */
.switch .switch-track {
  position      : absolute;
  cursor        : pointer;
  inset         : 0;
  background-color: var(--track);
  transition    : 0.3s;
  border-radius : 2rem;
}

/* switch  thumb */
.switch .switch-track:before {
  position      : absolute;
  content       : "";
  height        : 1.2rem;
  width         : 1.2rem;
  left          : 0.2rem;
  bottom        : 0.2rem;
  background-color: var(--text);
  transition    : 0.3s;
  border-radius : 50%;
}

/* Track active status*/
.switch input:checked + .switch-track {
  background-color: var(--accent);
}

/* Thumb active status*/
.switch input:checked + .switch-track:before {
  transform: translateX(1.2rem);
  background-color: var(--bg);
}

/* ==========================================================================
   CHECKBOX-GROUP
  ==========================================================================

  CHECKBOX [Name]
           [description]
  "State transition is handled via the :checked selector."
  ==========================================================================*/
    
 .checkbox-group {
    display           : flex;
    align-items       : center;
    gap               : 1rem;
    cursor            : pointer;
    user-select       : none;
  }
  
 .checkbox-group input[type=checkbox] {
    -webkit-appearance: none;
    appearance        : none;
    width             : 1.6rem;
    height            : 1.6rem;
    border            : 1px solid var(--border);
    border-radius     : 3px;
    background        : var(--surface);
    cursor            : pointer;
    position          : relative;
    flex-shrink       : 0;
  }
  
  .checkbox-group input[type=checkbox]:checked {
    background        : var(--accent);
    border-color      : var(--accent);
  }
  
  .checkbox-group input[type=checkbox]:checked::after {
    content           : '';
    position          : absolute;
    left              : 4px;
    top               : 1px;
    width             : 5px; 
    height            : 9px;
    border            : 2px solid var(--bg);;
    border-top        : none;
    border-left       : none;
    transform         : rotate(45deg);
  }
  
  .checkbox-group .description {
    color             : var(--muted); 
    font-size         : 1.1rem; 
  }

/* ==========================================================================
   SLIDER-GROUP
  ==========================================================================

  [Name]                     [Val]
  -------------[Tumb]--------(track)----
  
  Input range controller. Features tabular number alignment for 
  value stability and cross-browser thumb styling.
  ==========================================================================*/

.slider-group {
    display        : flex;
    flex-direction : column;
    gap            : 5px;
    margin-bottom: 1rem;
}

.slider-group label {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.slider-group label span.name { color: var(--text); }

.slider-group label span.val {
    color               : var(--accent);
    min-width           : 52px;
    text-align          : right;
    font-variant-numeric: tabular-nums;
}

.slider-group input[type=range] {
    -webkit-appearance: none;
    appearance        : none;
    width             : 100%;
    height            : 0.3rem;
    background        : var(--track);
    border-radius     :  0.2rem;
    outline           : none;
    cursor            : pointer;
}

.slider-group input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width             : 1.4rem; 
    height            : 1.4rem;
    border-radius     : 50%;
    background        : var(--thumb);
    cursor            : pointer;
}

.slider-group input[type=range]::-moz-range-thumb {
    width             : 1.4rem; 
    height            : 1.4rem;
    border-radius     : 50%;
    background        : var(--thumb);
    border            : none;
    cursor            : pointer;
}