header('Content-Type: text/css; charset=utf-8');
/* 
 * Version 1.0 , 2025-06-27
 * CSS Document 
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
  /* var(--switchWidth) */
  --switchHeight: 1.5rem;
  --switchWidth: max( 2.5rem , 2 * var(--switchHeight) );
  --switchGap: 0.3rem;
  --switchSquare: calc( max( 1.5rem , 1 * min( var(--switchWidth) , var(--switchHeight) ) ) );
  /* ::after */
  --switchMark: calc( 1.2 * ( var(--switchSquare) - 2 * var(--switchMarkLeft) ) );
  --switchMarkLeft: calc( 2.5 * var(--switchGap) / 2 );
  /* ::before */
  --switchHandle: calc( 1.0 * ( var(--switchSquare) - 2 * var(--switchHandleLeft) ) );
  --switchHandleLeft: calc( 2.0 * var(--switchGap) / 2 );
}
.flex {
  display: flex;
  align-items: center; /* Vertically center the children */
  height: auto;
}
.flex .float-left 
,.leftInput > input[type="checkbox"]
,.leftInput > input[type="radio"]
 {
  order: -1;        /* move checkbox input before the label */
  margin-right: 0.5em; /* space between checkbox and label */
  /* Remove float */
  float: none !important;
}
.checkbox > label[for]:has( + input[type="checkbox"] )
,.radio > label[for]:has( + input[type="radio"] )
,.checkbox > input[type="checkbox"] + label[for]
,.radio > input[type="radio"] + label[for]
{
  /*position: absolute; /* static */

  margin: 0.2em; /* around the label */

  flex: 1; /* this allows the lable to fill in the whole width, but it only works if the parent element has 'display: flex;' */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* label settings */
.checkbox > label[for]:hover:has( + input[type="checkbox"] )
,.radio > label[for]:hover:has( + input[type="radio"] )
,.checkbox > input[type="checkbox"] + label[for]:hover
,.radio > input[type="radio"] + label[for]:hover
{
    overflow-x: auto;  /* Show horizontal scroll */
    overflow-y: hidden;  /* Hide vertical scroll */
	width: max-content;
    text-overflow: unset;
	margin-top: 0;
	margin-bottom: 0;
}
/* Scrollbar track */
.checkbox > label[for]:hover::-webkit-scrollbar,
.radio > label[for]:hover::-webkit-scrollbar {
    width: 0.4em; /* vertical */
    height: 0.4em; /* horizontal */
}
/* Scrollbar thumb */
.checkbox > label[for]:hover::-webkit-scrollbar-thumb,
.radio > label[for]:hover::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 0.2em;
}
/* Scrollbar track background */
.checkbox > label[for]:hover::-webkit-scrollbar-track,
.radio > label[for]:hover::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* For Firefox */
.checkbox > label[for]:hover,
.radio > label[for]:hover {
    scrollbar-width: thin;        /* "auto" | "thin" | "none" */
    scrollbar-color: #888 #f1f1f1; /* thumb and track */
}

.checkbox > label[for]:has( + input[type="checkbox"] )
,.radio > label[for]:has( + input[type="radio"] )
{
  margin-right: 0.5em; /* space between label and checkbox*/
}

/* browser standard , this applyes to all */
 input[type="checkbox"]
,input[type="radio"]
 {
  width: var(--switchSquare);
  height: var(--switchSquare);

  /*min-width: var(--switchSquare);*/
  /*max-width: var(--switchSquare);*/
  /*min-height: var(--switchSquare);*/
  /*max-height: var(--switchSquare);*/

  border-radius: 10%;
  border: 0 solid light-dark(var(--greyDim), var(--greyDarker) );
  margin: 0.2em;
  padding: 0;

  position: relative;

  /*display: flex;*/
  align-items: center;
  justify-content: center;
  overflow: visible;
}
/* switch size */
 .switch > input[type="checkbox"]
,.switch > input[type="radio"]
 {
  width: var(--switchWidth);
  height: var(--switchHeight);

  /*min-width: var(--switchWidth);*/
  /*max-width: var(--switchWidth);*/
  /*min-height: var(--switchHeight);*/
  /*max-height: var(--switchHeight);*/
}

/* hover settings */
 input[type="checkbox"]:hover 
,input[type="radio"]:hover 
 {
  box-shadow: 0 0.4em 0.5em 0 var(--blackFour),
              0 0.4em 1em 0 var(--blackThree);
  transition: box-shadow 0.4s ease;
}
/* cursor settings */
 input[type="checkbox"]:not(:disabled) 
,input[type="checkbox"]:not(:disabled)  + label[for]
,label[for]:has( + input[type="checkbox"]:not(:disabled)  )
,input[type="radio"]:not(:disabled)  
,input[type="radio"]:not(:disabled)  + label[for]
,label[for]:has( + input[type="radio"]:not(:disabled)  )
{
  cursor: pointer;
}
 input[type="checkbox"]:disabled 
,input[type="checkbox"]:disabled + label[for]
,label[for]:has( + input[type="checkbox"]:disabled )
,input[type="radio"]:disabled 
,input[type="radio"]:disabled + label[for]
,label[for]:has( + input[type="radio"]:disabled )
{
  cursor: not-allowed;
}
/* unchecked colours */
 input[type="checkbox"]:not(:checked)
,input[type="radio"]:not(:checked)
 {
  background-color: var(--errorLighter); /* background */
  accent-color: var(--errorLighter); /* background */
  color: var(--error);/* For ✖ content if any */
}
/* checked colours */
 input[type=checkbox]:checked
,input[type="radio"]:checked 
 {
  background-color: var(--successLight); /* background */
  accent-color: var(--successLight); /* background */
  color: var(--success); /* For the ✔ content if any */
}
/* disabled colours */
 input[type="checkbox"]:disabled 
,input[type="radio"]:disabled 
{
  background-color: var(--greySilver);
  accent-color: var(--greySilver);
}
 input[type="checkbox"]:disabled::after
,input[type="radio"]:disabled::after 
,input[type="checkbox"]:disabled::before
,input[type="radio"]:disabled::before 
{
  color: var(--greyDarker);
  color: white;
}
/* styled settings */
/* hide default */
 .checkbox > input[type="checkbox"]
,.radio > input[type="radio"] 
,.switch > input[type="checkbox"]
,.switch > input[type="radio"] 
 {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* creates the new box */
 .checkbox > input[type="checkbox"]::after
,.radio > input[type="radio"]::after 
,.switch > input[type="checkbox"]::after
,.switch > input[type="radio"]::after 
{
  width: var(--switchMark);
  height: var(--switchMark);

  position: absolute;
  display: flex;

  /* center vertically, no horizontal shift yet */
  transform: translate( 50% , 50% ); /* ( x , y ) */ 
  transition: transform 0.5s, color 1s, opacity 1s;
  -webkit-transition: 0.5s;

  align-items: center;
  justify-content: center;
  text-align: center;

  content: "";
  line-height: 1;
  font-size: calc( var(--switchMark) );
  font-weight: bold;

  overflow: visible;
}
 .checkbox.unCheckedMark > input[type="checkbox"]::after
,.radio.unCheckedMark > input[type="radio"]::after 
,.switch.unCheckedMark > input[type="checkbox"]::after
,.switch.unCheckedMark > input[type="radio"]::after 
,.checkbox > input[type="checkbox"]:checked::after
,.radio > input[type="radio"]:checked::after 
,.switch > input[type="checkbox"]:checked::after
,.switch > input[type="radio"]:checked::after 
{
  border-radius: 10%;          /* rounded square */
  background-color: inherit;   /* keep red/green */
  /* box-shadow: 0 0 0 0.125em var(--greyGhost);  /* ring around */
  opacity: 1;
}
 .switch > input[type="checkbox"]::after
,.switch > input[type="radio"]::after 
{
  top: 50%;
  /* initial offset from left */
  left: var(--switchMarkLeft);
  /* translate mark position to the left (unchecked) */
  transform: translate( calc(var(--switchWidth) - var(--switchMark) - calc( 2 * var(--switchMarkLeft) ) ) , -50% ); /* ( x , y ) */ 
  content: "";
}
/* Switch Handle */
.switch > input[type="checkbox"]::before,
.switch > input[type="radio"]::before {
  width: var(--switchHandle);
  height: var(--switchHandle);

  border-radius: 0%;
  background-color: var(--white);
  box-shadow: 0 0 0 0.1em var(--greyDarker);
  opacity: 1;

  position: absolute;
  display: flex;

  /* Default handle position on the left (unchecked) */
  top: 50%;
  left: var(--switchHandleLeft);

  /* center vertically, no horizontal shift yet */
  transform: translate( 0 , -50% ); /* ( x , y ) */ 
  transition: transform 0.5s, color 1s, opacity 1s;
  -webkit-transition: 0.5s;

  align-items: center;
  justify-content: center;
  text-align: center;

  content: "";
  line-height: 1;
  font-size: calc( var(--switchHandle) );
  font-weight: bold;

  overflow: visible;
}

/* mark unchecked */
 .checkbox.unCheckedMark > input[type="checkbox"]:not(:checked)::after
,.radio.unCheckedMark > input[type="radio"]:not(:checked)::after
,.switch.unCheckedMark > input[type="checkbox"]:not(:checked)::after
,.switch.unCheckedMark > input[type="radio"]:not(:checked)::after
 {
  content: "\2716"; /*"✖";*/
}
/* mark checked*/
 .checkbox > input[type="checkbox"]:checked::after
,.radio > input[type="radio"]:checked::after
,.switch > input[type="checkbox"]:checked::after
,.switch > input[type="radio"]:checked::after
 {
  content: "\2714"; /*"✔";*/
}
/* checked on left */
 .switch > input[type="checkbox"]:checked::after
,.switch > input[type="radio"]:checked::after
 { /* ( x , y ) */ 
  transform: translate( 0 , -50% );
}

/* Handle slides to the right when checked */
 .switch > input[type="checkbox"]:checked::before
,.switch > input[type="radio"]:checked::before 
 { /* ( x , y ) */ 
  transform: translate( calc( var(--switchWidth) - var(--switchHandle) - calc( 2 * var(--switchHandleLeft) ) ) , -50% );
}

/* round */
 .checkbox.round > input[type="checkbox"]
,.radio:not(.square) > input[type="radio"]
,.switch.round > input[type="checkbox"]
,.switch:not(.square) > input[type="radio"]
 {
  border-radius: calc( var(--switchSquare)/2 );
}
 .checkbox.round > input[type="checkbox"]::after
,.radio:not(.square) > input[type="radio"]::after
,.switch.round > input[type="checkbox"]::after
,.switch:not(.square) > input[type="radio"]::after
,.switch:not(.squareHandle) > input[type="checkbox"]::before
,.switch:not(.squareHandle) > input[type="radio"]::before
 {
  border-radius: 50%;
}